/*

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: #ffd5bd;
  --primary-300: #fb8c4c;
  --primary-400: #ea681c;
  --bs-primary: #cc4f07;
  --primary-600: #a74208;
  --bs-primary-rgb: 204, 79, 7;
}

/* 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{
	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,
.back-top:hover,
.dots-creative .tns-nav .tns-nav-active,
.accordion.accordion-circle .accordion-header .accordion-button:after{
	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{
	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='%23cc4f07'%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='%23cc4f07'/%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");
}