/*

If you are in need to change color scheme according to your brand color schemes, Just make very few changes here in some variables and you are good to go.

IMP NOTES (Where to replace your color codes):

1. Please change your desired colors in :root selector at line no. 12
2. Change SVG colors at line no. 205 (Please read the comment mentioned there for better understanding)

*/

:root {
  --primary-200: #aa7de8;
  --primary-300: #7c32e4;
  --primary-400: #5402c8;
  --bs-primary: #5b04d4;
  --primary-600: #2c0463;
  --bs-primary-rgb: 92, 1, 230;
}

/* Color */
a,
.navbar-dark .navbar-top a:not(.dropdown-item):hover,
.navbar-top a:hover,
.dropdown-item:hover,
.dropdown-item:focus,
h1 > a:hover, .h1 > a:hover, h2 > a:hover, .h2 > a:hover, h3 > a:hover, .h3 > a:hover, h4 > a:hover, .h4 > a:hover, h5 > a:hover, .h5 > a:hover, h6 > a:hover, .h6 > a:hover, .h1 > a:hover, .h2 > a:hover, .h3 > a:hover, .h4 > a:hover, .h5 > a:hover, .h6 > a:hover,
.navbar-light .nav .nav-link:hover,
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover, 
.navbar-light .navbar-nav .nav-link:focus,
.nav-tabs.nav-tabs-line .nav-link.active,
.blockquote:before,
.dropdown-toggle-start-icon .collapsed.dropdown-toggle:after,
.dropdown-toggle-start-icon .dropdown-toggle:after,
.plyr--full-ui input[type=range],
.breadcrumb-item a:hover,
.breadcrumb.breadcrumb-dark .breadcrumb-item a:hover,
.btn-outline-primary,
.btn-primary-soft,
.btn-link,
.back-top,
.nav-pills-bg-soft .nav-link,
/* .nav-link:hover, .nav-link:focus, */
.pagination-primary-soft .page-link,
.nav-pills.nav-tabs-line .nav-link,
.card-border-hover:hover h2 i,
.stepper-outline .step.active .bs-stepper-label {
	color: var(--bs-primary);
}

/* button link hover */
.btn-link:hover{
  color: var(--primary-600);
}

/* Color important */
.dropdown-item.active,
.dropdown-item:active,
.navbar-dark .navbar-nav .nav-link:hover, 
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .show > .nav-link, 
.navbar-dark .navbar-nav .nav-link.active,
.list-group-icon-primary-bg i,
.list-group-icon-primary-bg span,
.sidebar-content .navbar-nav .nav-link:hover,
.nav .nav-link:hover, .nav .nav-link:focus{
	color: var(--bs-primary) !important; 
}

/* Color primary dark */
a:hover, 
.navbar-dark .nav .nav-link:hover,
.list-group-borderless a.list-group-item:hover,
.page-link:focus,
.accordion-button:not(.collapsed),
.alert-primary,
.alert-primary .alert-link
{
	color: var(--primary-600);
}

/* Color important */
.text-primary,
a.text-primary-hover:hover,
button.text-primary-hover:hover,
.text-primary-hover a:hover {
	color: var(--bs-primary) !important;
}

/* Background */
.bg-opacity-10 {
  --bs-bg-opacity: 0.1 !important;
}

.btn-primary,
.btn-primary-shadow,
.card-featured,
.arrow-primary .tns-controls [data-controls]:hover,
.arrow-dark .tns-controls [data-controls]:hover,
.plyr__control--overlaid,
.plyr--video .plyr__control.plyr__tab-focus, 
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true],
.page-item.active .page-link,
.page-link:hover,
.blockquote.blockquote-primary,
.btn-outline-primary:hover,
.btn-primary:disabled,
.btn-primary.disabled,
.form-range::-webkit-slider-thumb,
.list-group-item.active,
.progress-bar.bg-primary,
.nav-tabs .nav-link.active,
.nav-tabs.nav-tabs-bordered .nav-link.active,
header .navbar-nav .show > .nav-link:before,
header .navbar-nav .nav-link.active:before,
.btn-primary-soft:hover,.btn-primary-soft:focus,
.back-top:hover,
.dots-creative .tns-nav .tns-nav-active,
.accordion.accordion-circle .accordion-header .accordion-button:after,
.btn-primary-soft:active, .btn-primary-soft:hover{
	background-color: var(--bs-primary) !important;
}
.nav-pills.nav-pill-soft .nav-link,
.nav-pills.nav-tabs-line .nav-link.active,
.list-group-item-action:hover, .list-group-item-action:focus,
.sidebar-content .navbar-nav > .nav-item > .nav-link[data-bs-toggle=collapse][aria-expanded=true]{
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}
.nav-pills.nav-pill-soft .nav-link.active, 
.nav-pills.nav-pill-soft .show > .nav-link,
.nav-pills.nav-pills-bg-soft .nav-link.active, 
.nav-pills.nav-pills-bg-soft .show > .nav-link{
  background-color: var(--bs-primary) !important;
}

.back-top:hover{
	background: var(--bs-primary);
}

.bg-primary{
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.form-check-input:checked{
	background-color: var(--bs-primary) !important;
}

/* Background light*/
.alert-primary,
.form-range::-webkit-slider-thumb:active{
	background: var(--primary-200);
}

/* Background dark*/
.btn-check:focus + .btn-primary, 
.btn-primary:focus,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary, 
.btn-primary:active, 
.btn-primary.active, 
.show > .btn-primary.dropdown-toggle{
	background-color: var(--bs-primary);
}

/* Border Color */
.btn-primary,
.form-control:focus,
.nav-tabs.nav-tabs-line .nav-link.active,
.form-check-input:checked,
.blockquote.blockquote-line,
.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-outline-primary,
.btn-outline-primary:hover,
.btn-primary:disabled,
.btn-primary.disabled,
.form-check-input:focus,
.form-select:focus,
.list-group-item.active,
.bg-light-input .form-control:focus,
.card-border-hover:hover,
.btn-primary-soft:active, .btn-primary-soft:hover{
	border-color: var(--bs-primary) !important;
}

/* Border Color important*/
.border-primary,
.page-item.active .page-link,
.page-link:hover{
	border-color: var(--bs-primary) !important;
}

/* Border Color dark*/
.btn-primary:hover,
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle{
	background-color: var(--primary-600);
	border-color: var(--primary-600);
}

/* Border Color light*/
.alert-primary{
	border-color: var(--primary-300);
}

/*SVG fill color*/
.fill-primary{
	fill: var(--bs-primary) !important;
}

/* Sidebar */
.sidebar-content .navbar-nav > .nav-item > .nav-link[data-bs-toggle=collapse][aria-expanded=true]{
  color: var(--bs-primary) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}
.sidebar.navbar-expand-xl .sidebar-content .nav-item [data-bs-toggle=collapse][aria-expanded=true]:before{
  color: var(--bs-primary) !important;
}
.sidebar.navbar-expand-xl .sidebar-content .nav-item [data-bs-toggle=collapse][aria-expanded=true]:after{
  color: var(--bs-primary) !important;
}

/*box-shadow*/
.dots-primary .tns-nav [data-nav] {
    -webkit-box-shadow: inset 0 0 0 2px var(--bs-primary);
    box-shadow: inset 0 0 0 2px var(--bs-primary);
}
.dots-primary .tns-nav [data-nav]:after {
    background-color: var(--bs-primary);
    -webkit-box-shadow: 0 0 1px var(--bs-primary);
    box-shadow: 0 0 1px var(--bs-primary);
}
.btn-primary-shadow {
  box-shadow: 0 0 0 8px rgba(var(--bs-primary-rgb), 0.4) !important;
}

/* soft bg color*/
.bg-primary-soft-hover:hover,
.btn-primary-soft-check:hover,
.pagination-primary-soft .page-link,
.dropdown-item.active, .dropdown-item:active,
.dropdown-item:hover, .dropdown-item:focus{
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}
.btn-check:active+.btn-primary-soft-check, .btn-check:checked+.btn-primary-soft-check, .btn-primary-soft-check.active, .btn-primary-soft-check:active, .show>.btn-primary-soft-check.dropdown-toggle {
  background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
  color: var(--bs-primary);
}
.accordion-button:not(.collapsed),
.btn-primary-soft,
.back-top,
.nav-pills-bg-soft
{
  background-color: rgba(var(--bs-primary-rgb), 0.2);
}

/* Choices hover */
.choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
}

/* Stepper */
.stepper-outline .bs-stepper-circle{
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
	border: 2px solid var(--bs-primary) !important;
  color: var(--bs-primary);
}
.step.active .bs-stepper-circle{
  background-color: var(--bs-primary) !important;
}

/* soft bg color important;*/
.bg-primary-soft
{
  background-color: rgba(var(--bs-primary), 0.2) !important;
}
/* SVG inline colors */

/* "%23" is the encoding of '#' so place your color code immediately after "%23" in fill attribute. For example, if you want to replace any fill color with red then code will be like:
fill='%23ff0000' so it interprets like in HEX code: #ff0000; */

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235b04d4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%235b04d4'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}