/*

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. 263 (Please read the comment mentioned there for better understanding)

*/

:root {
  --primary-200: #c5cf0f;
  --primary-300: #f8f814;
  --primary-400: #1a3da6;
  --primary: hsl(243, 87%, 18%)
  ;
  --primary_rgba: 61, 109, 255;
  --primary-600: #dbcc20;
}

/* Highlight Color */
::-moz-selection {
  background: var(--primary);
}
::selection {
  background: var(--primary);
}
.bg-primary::-moz-selection {
  color: var(--primary);
}
.bg-primary::selection {
  color: var(--primary);
}

/* 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-link{
	color: var(--info);
}

/* 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{
	color: var(--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,
.btn-link:hover{
	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(--darkkhaki) !important;
}

/* Background */
.btn-primary,
.bg-primary-end:before,
.bg-primary-start:before,
.back-top,
.cursor-dot,
.cursor-dot-outline,
.bg-primary-multiply,
.bg-primary-multiply-hover,
.reveal-animation.reveal-primary::before,
.featured-label,
.tns-controls [data-controls]:hover,
.form-line .form-control ~ .focus-border,
.form-line .form-control:after,
.btn-line.text-primary:before,
.btn-line.text-primary:after,
.line-draw-animation::before,
.line-draw-animation::after,
.line-draw-inner::before,
.line-draw-inner::after,
.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,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.accordion.accordion-line .accordion-header .accordion-button:before,
.accordion.accordion-primary .accordion-header .accordion-button,
.blockquote.blockquote-primary,
.btn-outline-primary:hover,
.btn-primary:disabled,
.btn-primary.disabled,
.form-range::-webkit-slider-thumb,
.list-group-item.active,
.progress-bar,
.nav-tabs .nav-link.active,
.nav-tabs.nav-tabs-bordered .nav-link.active{
	background-color: var(--primary);
}

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

/* Background light*/
.list-group-icon-primary-bg i,
.list-group-icon-primary-bg span,
.alert-primary,
.form-range::-webkit-slider-thumb:active{
	background: var(--primary_rgba-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(--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{
	border-color: var(--primary);
}
/* Border Color important*/
.border-primary,
.page-item.active .page-link,
.page-link:hover{
	border-color: var(--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);
}

/* text shadow */
.text-primary-shadow{
	text-shadow: 0.03em 0.03em 0 var(--primary);
}

/* text stroke */
.text-primary-stroke{
	-webkit-text-stroke-color: var(--primary);
}

/*SVG fill color*/
.fill-primary{
	fill: var(--primary);
}
.fill-primary-light {
  fill: var(--primary-400);
}
.fill-primary-dark {
    fill: var(--primary-600);
}
.svg-custom-border-primary, .stroke-primary {
	stroke: var(--primary);
}

/*caret color*/
.caret-primary{
  caret-color: var(--primary);
}

/*box-shadow*/
.dots-primary .tns-nav [data-nav] {
    -webkit-box-shadow: inset 0 0 0 2px var(--primary);
    box-shadow: inset 0 0 0 2px var(--primary);
}
.dots-primary .tns-nav [data-nav]:after {
    background-color: var(--primary);
    -webkit-box-shadow: 0 0 1px var(--primary);
    box-shadow: 0 0 1px var(--primary);
}

/*gradient*/
.bg-primary-overlay-dotted{
	background-image: radial-gradient(var(--primary) 10%, transparent 0), radial-gradient(var(--primary) 10%, transparent 0);
}

/* RGB color*/
.dropdown-toggle-start-icon .dropdown-toggle,
.accordion-button:not(.collapsed){
	background:rgba(var(--primary_rgba), 0.2);
}

/*Play button ripple animation color*/
@keyframes rippleanim {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(var(--primary_rgba), 0.2);
            box-shadow: 0 0 0 0 rgba(var(--primary_rgba), 0.2);
  }
  100% {
    -webkit-box-shadow: 0 0 0 15px rgba(var(--primary_rgba), 0.2);
            box-shadow: 0 0 0 15px rgba(var(--primary_rgba), 0.2);
  }
}

@-webkit-keyframes rippleanim {
  0% {
    background: rgba(var(--primary_rgba), 0.2);
  }
  100% {
    background: rgba(var(--primary_rgba), 0.2);
  }
}

/* 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='%232654e0'%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='%233d6dff'/%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");
}