/*

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: #d1dcff;
  --primary-300: #b7c8ff;
  --primary-400: #7597ff;
  --primary: #3d6dff;
  --primary_rgba: 61, 109, 255;
  --primary-600: #2654e0;
}

/* 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(--primary);
}

/* 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(--primary) !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(--primary) !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-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");
}

/* Texte des badges gris.

   --bs-secondary vaut #d0d4d9 dans ce theme, la ou Bootstrap livre un gris
   sombre. Le blanc de --bs-badge-color s'y retrouve a 1,49:1 de contraste :
   illisible. Le gris fonce remonte le rapport a 4,98:1, soit le seuil AA
   pour du texte normal.

   Pose dans la palette de marque : blue.css est toujours charge apres le
   bundle Bootstrap 5.3.8 et l'emporte sans avoir besoin de !important.
   La specificite (0,2,0) suffit
   face au color: var(--bs-badge-color) de .badge (0,1,0).

   Non conditionne au theme : --bs-secondary n'est pas redefini en sombre,
   le fond du badge y est identique et le probleme aussi. */
.badge.bg-secondary {
  color: #555559;
}


/* Puces d'etiquettes : ne pas voler au bouton sa couleur de texte.

   .text-primary-hover a impose --bs-gray-500 a tout lien qu'il contient.
   Sur un a.btn.btn-light, cela ecrase le --bs-btn-color: #000 du bouton et
   pose du gris #a1a1a8 sur son fond #f7f8f9 : 2,41:1, illisible. La couleur
   native du bouton y donne 19,75:1.

   Le lien reprend donc --bs-btn-color des qu'il est aussi un bouton. La
   regle vaut pour les deux themes : ni le fond ni le gris ne dependent du
   mode sombre, le defaut y etait donc identique.

   Specificite (0,2,1), au-dessus du .text-primary-hover a d'origine (0,1,1).
   Le survol n'est pas touche : il reste regi par .text-primary-hover a:hover,
   qui porte !important. */
.text-primary-hover a.btn {
  color: var(--bs-btn-color);
}


/* Paragraphes contenus dans un titre.

   Le filtre richtext enveloppe son contenu dans un <p>. Place dans un titre,
   ce <p> tombe sous la regle « p, tr » qui impose font-size: 1.0625rem,
   font-weight: 400 et color: var(--bs-gray-800) : la taille du titre est
   annulee, puisque le <p> porte sa propre valeur et n'herite plus.

   Un paragraphe place dans un titre doit suivre la typographie du titre.
   Specificite (0,0,2), au-dessus du « p » d'origine (0,0,1).

   Concerne les h2.intro-title des pages index, les h2.page-lead des pages de
   detail, et le h3 de signup_success. Le bloc brands de l'accueil emploie
   inline_richtext, qui n'ajoute pas de <p> : il n'est pas concerne. */
:is(h1, h2, h3, h4, h5, h6) > p {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}