/* Custom CSS */

:root {
/* HSL colors*/
--darker: 	  hsl(215, 98%, 12%);
--dark: 	  hsl(215, 98%, 16%);	
--dark-light: hsl(220, 94%, 90%);
--light: 	  hsl(0, 0%, 100%);	

--gray-dark: 	hsl(238, 15%, 34%);
--gray: 		hsl(238, 12%, 51%);
--gray-light: 	hsl(237, 13%, 66%);

--primary: 		hsl(210, 100%, 60%);	
--secondary: 	hsl(240, 15%, 60%);
--success: 		hsl(162, 77%, 44%);
--info: 		hsl(187, 78%, 45%);
--warning: 		hsl(31, 100%, 68%);
--danger: 		hsl(348, 96%, 62%);

/* HSL colors dark*/
--primary-dark: 	hsl(var(--primary-hsl-1)  calc(var(--primary-hsl-2) - 15%));	
--secondary-dark: 	hsl(var(--secondary-hsl-1)  calc(var(--secondary-hsl-2) - 15%));	
--success-dark: 	hsl(var(--success-hsl-1)  calc(var(--success-hsl-2) - 15%));
--info-dark: 		hsl(var(--info-hsl-1)  calc(var(--info-hsl-2) - 15%));
--warning-dark: 	hsl(var(--warning-hsl-1)  calc(var(--warning-hsl-2) - 15%));
--danger-dark: 		hsl(var(--danger-hsl-1)  calc(var(--danger-hsl-2) - 15%));

/* HSL colors light*/
--primary-light: 	hsl(var(--primary-hsl-1)  calc(var(--primary-hsl-2) + 35%));	
--secondary-light: 	hsl(var(--secondary-hsl-1)  calc(var(--secondary-hsl-2) + 35%));	
--success-light: 	hsl(var(--success-hsl-1)  calc(var(--success-hsl-2) + 45%));
--info-light: 		hsl(var(--info-hsl-1)  calc(var(--info-hsl-2) + 50%));
--warning-light: 	hsl(var(--warning-hsl-1)  calc(var(--warning-hsl-2) + 25%));
--danger-light: 	hsl(var(--danger-hsl-1)  calc(var(--danger-hsl-2) + 35%));
	
	
/* HSL colors with Luminosity adjustable*/
--primary-hsl-1: 	210, 100%,; --primary-hsl-2: 60%;	
--secondary-hsl-1: 	240, 15%,; --secondary-hsl-2:60%;
--success-hsl-1: 	162, 77%,; --success-hsl-2: 44%;
--info-hsl-1: 		187, 78%,; --info-hsl-2: 42%;
--warning-hsl-1: 	31, 100%,; --warning-hsl-2: 68%;
--danger-hsl-1: 	348, 96%,; --danger-hsl-2: 62%;

--darker-hsl-1: 	221, 94%,; --darker-hsl-2: 12%;
--dark-hsl-1:  		220, 94%,; --dark-hsl-2: 16%;	
--light-hsl-1: 	      0,  0%,; --light-hsl-2: 100%;

/* RGBA colors with Transparency adjustable*/
--primary-rgba:	  54, 153, 255;	
--secondary-rgba: 138, 138, 168;
--success-rgba:   26, 198, 146;
--info-rgba:      25, 183, 204;
--warning-rgba:   255, 177, 92;
--danger-rgba:    251, 67, 104;

--darker-rgba: 	  1, 26, 61;
--dark-rgba:      1, 34, 81;
--light-rgba:     255, 255, 255;

--gray-rgba:     115, 116, 145;

/* Col dimensions */
--col: 8.3333333333%;
--col-half: 4.16666666665%;

}

/* RGBA & HSL adjustable example*/
.rgba-example {background-color:rgba(var(--primary-rgba), 0.9)}
.hsl-example  {background-color:  hsl(var(--primary-hsl-1) calc(var(--primary-hsl-2) - 0%)); }

/* Background colors*/
.bg-darker {background-color: var(--darker)!important}
.bg-dark {background-color: var(--dark)!important}
.bg-light {background-color: var(--light)!important}

.bg-gray-dark {background-color: var(--gray-dark)!important}
.bg-gray {background-color: var(--gray)!important}
.bg-gray-light {background-color: var(--gray-light)!important}

.bg-primary-dark {background-color: var(--primary-dark) !important}
.bg-secondary-dark {background-color: var(--secondary-dark) !important}
.bg-success-dark {background-color: var(--success-dark) !important}
.bg-info-dark {background-color: var(--info-dark) !important}
.bg-warning-dark {background-color: var(--warning-dark) !important}
.bg-danger-dark {background-color: var(--danger-dark) !important}

.bg-primary {background-color: var(--primary) !important}
.bg-secondary {background-color: var(--secondary)!important}
.bg-success {background-color: var(--success)!important}
.bg-info {background-color: var(--info)!important}
.bg-danger {background-color: var(--danger)!important}
.bg-warning {background-color: var(--warning)!important}

.bg-primary-light {background-color: var(--primary-light) !important}
.bg-secondary-light {background-color: var(--secondary-light) !important}
.bg-success-light {background-color: var(--success-light) !important}
.bg-info-light {background-color: var(--info-light) !important}
.bg-warning-light {background-color: var(--warning-light) !important}
.bg-danger-light {background-color: var(--danger-light) !important}

/* Text colors*/
.text-darker {color: var(--darker)!important}
.text-dark {color: var(--dark)!important}
.text-light {color: var(--light)!important}
.text-light {color: var(--light)!important}

.text-primary-dark {color: var(--primary-dark) !important}
.text-secondary-dark {color: var(--secondary-dark) !important}
.text-success-dark {color: var(--success-dark) !important}
.text-info-dark {color: var(--info-dark) !important}
.text-warning-dark {color: var(--warning-dark) !important}
.text-danger-dark {color: var(--danger-dark) !important}

.text-primary {color: var(--primary) !important}
.text-secondary {color: var(--secondary)!important}
.text-success {color: var(--success)!important}
.text-info {color: var(--info)!important}
.text-danger {color: var(--danger)!important}
.text-warning {color: var(--warning)!important}

.text-primary-light {color: var(--primary-light) !important}
.text-secondary-light {color: var(--secondary-light) !important}
.text-success-light {color: var(--success-light) !important}
.text-info-light {color: var(--info-light) !important}
.text-warning-light {color: var(--warning-light) !important}
.text-danger-light {color: var(--danger-light) !important}

.text-gray-dark {color: var(--gray-dark)!important}
.text-gray {color: var(--gray)!important}
.text-gray-light {color: var(--gray-light)!important}


/*Bootstrap*/
/*buttons*/

/*primary*/
.btn-primary {
  color: #fff;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-primary:hover {
  color: #fff;
  background-color: hsl(var(--primary-hsl-1)  calc(var(--primary-hsl-2) - 8%)) !important;
  border-color: hsl(var(--primary-hsl-1)  calc(var(--primary-hsl-2) - 8%)) !important;
}
.btn-check:focus + .btn-primary, .btn-primary:focus {
  color: #fff;
  background-color: hsl(var(--primary-hsl-1)  calc(var(--primary-hsl-2) - 8%)) !important;
  border-color: hsl(var(--primary-hsl-1)  calc(var(--primary-hsl-2) - 8%)) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgba), 0.8) !important;
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: hsl(var(--primary-hsl-1)  calc(var(--primary-hsl-2) - 10%)) !important;
  border-color: hsl(var(--primary-hsl-1)  calc(var(--primary-hsl-2) - 10%)) !important;
}
.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgba), 0.8) !important;
}
.btn-primary:disabled, .btn-primary.disabled {
  color: #fff;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/*secondary*/
.btn-secondary {
  color: #fff;
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}
.btn-secondary:hover {
  color: #fff;
  background-color: hsl(var(--secondary-hsl-1)  calc(var(--secondary-hsl-2) - 8%)) !important;
  border-color: hsl(var(--secondary-hsl-1)  calc(var(--secondary-hsl-2) - 8%)) !important;
}
.btn-check:focus + .btn-secondary, .btn-secondary:focus {
  color: #fff;
  background-color: hsl(var(--secondary-hsl-1)  calc(var(--secondary-hsl-2) - 8%)) !important;
  border-color: hsl(var(--secondary-hsl-1)  calc(var(--secondary-hsl-2) - 8%)) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--secondary-rgba), 0.8) !important;
}
.btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: hsl(var(--secondary-hsl-1)  calc(var(--secondary-hsl-2) - 10%)) !important;
  border-color: hsl(var(--secondary-hsl-1)  calc(var(--secondary-hsl-2) - 10%)) !important;
}
.btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--secondary-rgba), 0.8) !important;
}
.btn-secondary:disabled, .btn-secondary.disabled {
  color: #fff;
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}

/*success*/
.btn-success {
  color: #fff;
  background-color: var(--success) !important;
  border-color: var(--success) !important;
}
.btn-success:hover {
  color: #fff;
  background-color: hsl(var(--success-hsl-1)  calc(var(--success-hsl-2) - 8%)) !important;
  border-color: hsl(var(--success-hsl-1)  calc(var(--success-hsl-2) - 8%)) !important;
}
.btn-check:focus + .btn-success, .btn-success:focus {
  color: #fff;
  background-color: hsl(var(--success-hsl-1)  calc(var(--success-hsl-2) - 8%)) !important;
  border-color: hsl(var(--success-hsl-1)  calc(var(--success-hsl-2) - 8%)) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--success-rgba), 0.8) !important;
}
.btn-check:checked + .btn-success, .btn-check:active + .btn-success, .btn-success:active, .btn-success.active, .show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: hsl(var(--success-hsl-1)  calc(var(--success-hsl-2) - 10%)) !important;
  border-color: hsl(var(--success-hsl-1)  calc(var(--success-hsl-2) - 10%)) !important;
}
.btn-check:checked + .btn-success:focus, .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus, .show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--success-rgba), 0.8) !important;
}
.btn-success:disabled, .btn-success.disabled {
  color: #fff;
  background-color: var(--success) !important;
  border-color: var(--success) !important;
}

/*info*/
.btn-info {
  color: #fff;
  background-color: var(--info) !important;
  border-color: var(--info) !important;
}
.btn-info:hover {
  color: #fff;
  background-color: hsl(var(--info-hsl-1)  calc(var(--info-hsl-2) - 8%)) !important;
  border-color: hsl(var(--info-hsl-1)  calc(var(--info-hsl-2) - 8%)) !important;
}
.btn-check:focus + .btn-info, .btn-info:focus {
  color: #fff;
  background-color: hsl(var(--info-hsl-1)  calc(var(--info-hsl-2) - 8%)) !important;
  border-color: hsl(var(--info-hsl-1)  calc(var(--info-hsl-2) - 8%)) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--info-rgba), 0.8) !important;
}
.btn-check:checked + .btn-info, .btn-check:active + .btn-info, .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: hsl(var(--info-hsl-1)  calc(var(--info-hsl-2) - 10%)) !important;
  border-color: hsl(var(--info-hsl-1)  calc(var(--info-hsl-2) - 10%)) !important;
}
.btn-check:checked + .btn-info:focus, .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus, .show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--info-rgba), 0.8) !important;
}
.btn-info:disabled, .btn-info.disabled {
  color: #fff;
  background-color: var(--info) !important;
  border-color: var(--info) !important;
}

/*warning*/
.btn-warning {
  color: #fff;
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}
.btn-warning:hover {
  color: #fff;
  background-color: hsl(var(--warning-hsl-1)  calc(var(--warning-hsl-2) - 8%)) !important;
  border-color: hsl(var(--warning-hsl-1)  calc(var(--warning-hsl-2) - 8%)) !important;
}
.btn-check:focus + .btn-warning, .btn-warning:focus {
  color: #fff;
  background-color: hsl(var(--warning-hsl-1)  calc(var(--warning-hsl-2) - 8%)) !important;
  border-color: hsl(var(--warning-hsl-1)  calc(var(--warning-hsl-2) - 8%)) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--warning-rgba), 0.8) !important;
}
.btn-check:checked + .btn-warning, .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle {
  color: #fff;
  background-color: hsl(var(--warning-hsl-1)  calc(var(--warning-hsl-2) - 10%)) !important;
  border-color: hsl(var(--warning-hsl-1)  calc(var(--warning-hsl-2) - 10%)) !important;
}
.btn-check:checked + .btn-warning:focus, .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus, .show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--warning-rgba), 0.8) !important;
}
.btn-warning:disabled, .btn-warning.disabled {
  color: #fff;
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}

/*danger*/
.btn-danger {
  color: #fff;
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.btn-danger:hover {
  color: #fff;
  background-color: hsl(var(--danger-hsl-1)  calc(var(--danger-hsl-2) - 8%)) !important;
  border-color: hsl(var(--danger-hsl-1)  calc(var(--danger-hsl-2) - 8%)) !important;
}
.btn-check:focus + .btn-danger, .btn-danger:focus {
  color: #fff;
  background-color: hsl(var(--danger-hsl-1)  calc(var(--danger-hsl-2) - 8%)) !important;
  border-color: hsl(var(--danger-hsl-1)  calc(var(--danger-hsl-2) - 8%)) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgba), 0.8) !important;
}
.btn-check:checked + .btn-danger, .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: hsl(var(--danger-hsl-1)  calc(var(--danger-hsl-2) - 10%)) !important;
  border-color: hsl(var(--danger-hsl-1)  calc(var(--danger-hsl-2) - 10%)) !important;
}
.btn-check:checked + .btn-danger:focus, .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus, .show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgba), 0.8) !important;
}
.btn-danger:disabled, .btn-danger.disabled {
  color: #fff;
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
}

/*light*/
.btn-light {
  color: var(--dark) !important;
  background-color: var(--light) !important;
  border-color: var(--light) !important;
}
.btn-light:hover {
  color: var(--dark) !important;
  background-color: hsl(var(--light-hsl-1)  calc(var(--light-hsl-2) - 5%)) !important;
  border-color: hsl(var(--light-hsl-1)  calc(var(--light-hsl-2) - 5%)) !important;
}
.btn-check:focus + .btn-light, .btn-light:focus {
  color: #fff;
  background-color: hsl(var(--light-hsl-1)  calc(var(--light-hsl-2) - 3%)) !important;
  border-color: hsl(var(--light-hsl-1)  calc(var(--light-hsl-2) - 3%)) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--light-rgba), 0.8) !important;
}
.btn-check:checked + .btn-light, .btn-check:active + .btn-light, .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle {
  color: #fff;
  background-color: hsl(var(--light-hsl-1)  calc(var(--light-hsl-2) - 10%)) !important;
  border-color: hsl(var(--light-hsl-1)  calc(var(--light-hsl-2) - 10%)) !important;
}
.btn-check:checked + .btn-light:focus, .btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show > .btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--light-rgba), 0.8) !important;
}
.btn-light:disabled, .btn-light.disabled {
  color: #fff;
  background-color: var(--light) !important;
  border-color: var(--light) !important;
}

/*dark*/
.btn-dark {
  color: #fff;
  background-color: var(--dark) !important;
  border-color: var(--dark) !important;
}
.btn-dark:hover {
  color: #fff;
  background-color: hsl(var(--dark-hsl-1)  calc(var(--dark-hsl-2) - 3%)) !important;
  border-color: hsl(var(--dark-hsl-1)  calc(var(--dark-hsl-2) - 3%)) !important;
}
.btn-check:focus + .btn-dark, .btn-dark:focus {
  color: #fff;
  background-color: hsl(var(--dark-hsl-1)  calc(var(--dark-hsl-2) - 3%)) !important;
  border-color: hsl(var(--dark-hsl-1)  calc(var(--dark-hsl-2) - 3%)) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--dark-rgba), 0.8) !important;
}
.btn-check:checked + .btn-dark, .btn-check:active + .btn-dark, .btn-dark:active, .btn-dark.active, .show > .btn-dark.dropdown-toggle {
  color: #fff;
  background-color: hsl(var(--dark-hsl-1)  calc(var(--dark-hsl-2) - 10%)) !important;
  border-color: hsl(var(--dark-hsl-1)  calc(var(--dark-hsl-2) - 10%)) !important;
}
.btn-check:checked + .btn-dark:focus, .btn-check:active + .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active:focus, .show > .btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--dark-rgba), 0.8) !important;
}
.btn-dark:disabled, .btn-dark.disabled {
  color: #fff;
  background-color: var(--dark) !important;
  border-color: var(--dark) !important;
}

/*outline-primary*/
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary) !important;
}
.btn-outline-primary:hover {
  color: #fff !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgba), 0.5) !important;
}
.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
  color: #fff;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgba), 0.5) !important;
}
.btn-outline-primary:disabled, .btn-outline-primary.disabled {
  color: var(--primary) !important;
  background-color: transparent;
}

/*outline-secondary*/
.btn-outline-secondary {
  color: var(--secondary);
  border-color: var(--secondary) !important;
}
.btn-outline-secondary:hover {
  color: #fff !important;
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}
.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--secondary-rgba), 0.5) !important;
}
.btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
  color: #fff;
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}
.btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--secondary-rgba), 0.5) !important;
}
.btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
  color: var(--secondary) !important;
  background-color: transparent;
}

/*outline-success*/
.btn-outline-success {
  color: var(--success);
  border-color: var(--success) !important;
}
.btn-outline-success:hover {
  color: #fff !important;
  background-color: var(--success) !important;
  border-color: var(--success) !important;
}
.btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--success-rgba), 0.5) !important;
}
.btn-check:checked + .btn-outline-success, .btn-check:active + .btn-outline-success, .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show {
  color: #fff;
  background-color: var(--success) !important;
  border-color: var(--success) !important;
}
.btn-check:checked + .btn-outline-success:focus, .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--success-rgba), 0.5) !important;
}
.btn-outline-success:disabled, .btn-outline-success.disabled {
  color: var(--success) !important;
  background-color: transparent;
}

/*outline-danger*/
.btn-outline-danger {
  color: var(--danger);
  border-color: var(--danger) !important;
}
.btn-outline-danger:hover {
  color: #fff !important;
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgba), 0.5) !important;
}
.btn-check:checked + .btn-outline-danger, .btn-check:active + .btn-outline-danger, .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show {
  color: #fff;
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.btn-check:checked + .btn-outline-danger:focus, .btn-check:active + .btn-outline-danger:focus, .btn-outline-danger:active:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgba), 0.5) !important;
}
.btn-outline-danger:disabled, .btn-outline-danger.disabled {
  color: var(--danger) !important;
  background-color: transparent;
}

/*outline-warning*/
.btn-outline-warning {
  color: var(--warning);
  border-color: var(--warning) !important;
}
.btn-outline-warning:hover {
  color: #fff !important;
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}
.btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--warning-rgba), 0.5) !important;
}
.btn-check:checked + .btn-outline-warning, .btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show {
  color: #fff;
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}
.btn-check:checked + .btn-outline-warning:focus, .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--warning-rgba), 0.5) !important;
}
.btn-outline-warning:disabled, .btn-outline-warning.disabled {
  color: var(--warning) !important;
  background-color: transparent;
}

/*outline-info*/
.btn-outline-info {
  color: var(--info);
  border-color: var(--info) !important;
}
.btn-outline-info:hover {
  color: #fff !important;
  background-color: var(--info) !important;
  border-color: var(--info) !important;
}
.btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--info-rgba), 0.5) !important;
}
.btn-check:checked + .btn-outline-info, .btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show {
  color: #fff;
  background-color: var(--info) !important;
  border-color: var(--info) !important;
}
.btn-check:checked + .btn-outline-info:focus, .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--info-rgba), 0.5) !important;
}
.btn-outline-info:disabled, .btn-outline-info.disabled {
  color: var(--info) !important;
  background-color: transparent;
}

/*outline-dark*/
.btn-outline-dark {
  color: var(--dark);
  border-color: var(--dark) !important;
}
.btn-outline-dark:hover {
  color: #fff !important;
  background-color: var(--dark) !important;
  border-color: var(--dark) !important;
}
.btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--dark-rgba), 0.5) !important;
}
.btn-check:checked + .btn-outline-dark, .btn-check:active + .btn-outline-dark, .btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show {
  color: #fff;
  background-color: var(--dark) !important;
  border-color: var(--dark) !important;
}
.btn-check:checked + .btn-outline-dark:focus, .btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--dark-rgba), 0.5) !important;
}
.btn-outline-dark:disabled, .btn-outline-dark.disabled {
  color: var(--dark) !important;
  background-color: transparent;
}


/*translucent-primary*/
.btn-translucent-primary {
  color: hsl(var(--primary-hsl-1)  calc(var(--primary-hsl-2) + 10%));
  background-color: rgba(var(--primary-rgba), 0.1) !important;  
  border-color: transparent !important;
}
.btn-translucent-primary:hover {
  color: #fff !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-check:focus + .btn-translucent-primary, .btn-translucent-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgba), 0.5) !important;
}
.btn-check:checked + .btn-translucent-primary, .btn-check:active + .btn-translucent-primary, .btn-translucent-primary:active, .btn-translucent-primary.active, .btn-translucent-primary.dropdown-toggle.show {
  color: #fff;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-check:checked + .btn-translucent-primary:focus, .btn-check:active + .btn-translucent-primary:focus, .btn-translucent-primary:active:focus, .btn-translucent-primary.active:focus, .btn-translucent-primary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgba), 0.5) !important;
}
.btn-translucent-primary:disabled, .btn-translucent-primary.disabled {
  color: var(--primary) !important;
  background-color: transparent;
}


/*translucent-secondary*/
.btn-translucent-secondary {
  color: hsl(var(--secondary-hsl-1)  calc(var(--secondary-hsl-2) + 10%));
  background-color: rgba(var(--secondary-rgba), 0.1) !important;  
  border-color: transparent !important;
}
.btn-translucent-secondary:hover {
  color: #fff !important;
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}
.btn-check:focus + .btn-translucent-secondary, .btn-translucent-secondary:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--secondary-rgba), 0.5) !important;
}
.btn-check:checked + .btn-translucent-secondary, .btn-check:active + .btn-translucent-secondary, .btn-translucent-secondary:active, .btn-translucent-secondary.active, .btn-translucent-secondary.dropdown-toggle.show {
  color: #fff;
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}
.btn-check:checked + .btn-translucent-secondary:focus, .btn-check:active + .btn-translucent-secondary:focus, .btn-translucent-secondary:active:focus, .btn-translucent-secondary.active:focus, .btn-translucent-secondary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--secondary-rgba), 0.5) !important;
}
.btn-translucent-secondary:disabled, .btn-translucent-secondary.disabled {
  color: var(--secondary) !important;
  background-color: transparent;
}

/*translucent-success*/
.btn-translucent-success {
  color: var(--success);
  background-color: rgba(var(--success-rgba), 0.1) !important;  
  border-color: transparent !important;
}
.btn-translucent-success:hover {
  color: #fff !important;
  background-color: var(--success) !important;
  border-color: var(--success) !important;
}
.btn-check:focus + .btn-translucent-success, .btn-translucent-success:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--success-rgba), 0.5) !important;
}
.btn-check:checked + .btn-translucent-success, .btn-check:active + .btn-translucent-success, .btn-translucent-success:active, .btn-translucent-success.active, .btn-translucent-success.dropdown-toggle.show {
  color: #fff;
  background-color: var(--success) !important;
  border-color: var(--success) !important;
}
.btn-check:checked + .btn-translucent-success:focus, .btn-check:active + .btn-translucent-success:focus, .btn-translucent-success:active:focus, .btn-translucent-success.active:focus, .btn-translucent-success.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--success-rgba), 0.5) !important;
}
.btn-translucent-success:disabled, .btn-translucent-success.disabled {
  color: var(--success) !important;
  background-color: transparent;
}

/*translucent-danger*/
.btn-translucent-danger {
  color: var(--danger);
  background-color: rgba(var(--danger-rgba), 0.1) !important;  
  border-color: transparent !important;
}
.btn-translucent-danger:hover {
  color: #fff !important;
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.btn-check:focus + .btn-translucent-danger, .btn-translucent-danger:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgba), 0.5) !important;
}
.btn-check:checked + .btn-translucent-danger, .btn-check:active + .btn-translucent-danger, .btn-translucent-danger:active, .btn-translucent-danger.active, .btn-translucent-danger.dropdown-toggle.show {
  color: #fff;
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.btn-check:checked + .btn-translucent-danger:focus, .btn-check:active + .btn-translucent-danger:focus, .btn-translucent-danger:active:focus, .btn-translucent-danger.active:focus, .btn-translucent-danger.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgba), 0.5) !important;
}
.btn-translucent-danger:disabled, .btn-translucent-danger.disabled {
  color: var(--danger) !important;
  background-color: transparent;
}

/*translucent-warning*/
.btn-translucent-warning {
  color: var(--warning);
  background-color: rgba(var(--warning-rgba), 0.1) !important;  
  border-color: transparent !important;
}
.btn-translucent-warning:hover {
  color: #fff !important;
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}
.btn-check:focus + .btn-translucent-warning, .btn-translucent-warning:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--warning-rgba), 0.5) !important;
}
.btn-check:checked + .btn-translucent-warning, .btn-check:active + .btn-translucent-warning, .btn-translucent-warning:active, .btn-translucent-warning.active, .btn-translucent-warning.dropdown-toggle.show {
  color: #fff;
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}
.btn-check:checked + .btn-translucent-warning:focus, .btn-check:active + .btn-translucent-warning:focus, .btn-translucent-warning:active:focus, .btn-translucent-warning.active:focus, .btn-translucent-warning.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--warning-rgba), 0.5) !important;
}
.btn-translucent-warning:disabled, .btn-translucent-warning.disabled {
  color: var(--warning) !important;
  background-color: transparent;
}

/*translucent-info*/
.btn-translucent-info {
  color: hsl(var(--info-hsl-1)  calc(var(--info-hsl-2) + 5%));
  background-color: rgba(var(--info-rgba), 0.1) !important;  
  border-color: transparent !important;
}
.btn-translucent-info:hover {
  color: #fff !important;
  background-color: var(--info) !important;
  border-color: var(--info) !important;
}
.btn-check:focus + .btn-translucent-info, .btn-translucent-info:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--info-rgba), 0.5) !important;
}
.btn-check:checked + .btn-translucent-info, .btn-check:active + .btn-translucent-info, .btn-translucent-info:active, .btn-translucent-info.active, .btn-translucent-info.dropdown-toggle.show {
  color: #fff;
  background-color: var(--info) !important;
  border-color: var(--info) !important;
}
.btn-check:checked + .btn-translucent-info:focus, .btn-check:active + .btn-translucent-info:focus, .btn-translucent-info:active:focus, .btn-translucent-info.active:focus, .btn-translucent-info.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--info-rgba), 0.5) !important;
}
.btn-translucent-info:disabled, .btn-translucent-info.disabled {
  color: var(--info) !important;
  background-color: transparent;
}


/*translucent-light*/
.btn-translucent-light {
  color: var(--light);
  background-color: rgba(var(--light-rgba), 0.1) !important;  
  border-color: transparent !important;
}
.btn-translucent-light:hover {
  color: var(--dark);
  background-color: var(--light) !important;
  border-color: var(--light) !important;
}
.btn-check:focus + .btn-translucent-light, .btn-translucent-light:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--light-rgba), 0.5) !important;
}
.btn-check:checked + .btn-translucent-light, .btn-check:active + .btn-translucent-light, .btn-translucent-light:active, .btn-translucent-light.active, .btn-translucent-light.dropdown-toggle.show {
  color: #fff;
  background-color: var(--light) !important;
  border-color: var(--light) !important;
}
.btn-check:checked + .btn-translucent-light:focus, .btn-check:active + .btn-translucent-light:focus, .btn-translucent-light:active:focus, .btn-translucent-light.active:focus, .btn-translucent-light.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--light-rgba), 0.5) !important;
}
.btn-translucent-light:disabled, .btn-translucent-light.disabled {
  color: var(--light) !important;
  background-color: transparent;
}

/*translucent-dark*/
.btn-translucent-dark {
  color: var(--dark);
  background-color: rgba(var(--dark-rgba), 0.1) !important;  
  border-color: transparent !important;
}
.btn-translucent-dark:hover {
  color: #fff !important;
  background-color: var(--dark) !important;
  border-color: var(--dark) !important;
}
.btn-check:focus + .btn-translucent-dark, .btn-translucent-dark:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--dark-rgba), 0.5) !important;
}
.btn-check:checked + .btn-translucent-dark, .btn-check:active + .btn-translucent-dark, .btn-translucent-dark:active, .btn-translucent-dark.active, .btn-translucent-dark.dropdown-toggle.show {
  color: #fff;
  background-color: var(--dark) !important;
  border-color: var(--dark) !important;
}
.btn-check:checked + .btn-translucent-dark:focus, .btn-check:active + .btn-translucent-dark:focus, .btn-translucent-dark:active:focus, .btn-translucent-dark.active:focus, .btn-translucent-dark.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--dark-rgba), 0.5) !important;
}
.btn-translucent-dark:disabled, .btn-translucent-dark.disabled {
  color: var(--dark) !important;
  background-color: transparent;
}

/*light-primary*/
.btn-light-primary {
  color: var(--primary-dark);
  background-color: hsl(var(--primary-hsl-1)  calc(var(--primary-hsl-2) + 30%)) !important;  
  border-color: transparent !important;
}
.btn-light-primary:hover {
  color: #fff !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-check:focus + .btn-light-primary, .btn-light-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgba), 0.5) !important;
}
.btn-check:checked + .btn-light-primary, .btn-check:active + .btn-light-primary, .btn-light-primary:active, .btn-light-primary.active, .btn-light-primary.dropdown-toggle.show {
  color: #fff;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-check:checked + .btn-light-primary:focus, .btn-check:active + .btn-light-primary:focus, .btn-light-primary:active:focus, .btn-light-primary.active:focus, .btn-light-primary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgba), 0.5) !important;
}
.btn-light-primary:disabled, .btn-light-primary.disabled {
  color: var(--primary) !important;
  background-color: transparent;
}

/*light-secondary*/
.btn-light-secondary {
  color: var(--secondary-dark);
  background-color: hsl(var(--secondary-hsl-1)  calc(var(--secondary-hsl-2) + 30%)) !important;  
  border-color: transparent !important;
}
.btn-light-secondary:hover {
  color: #fff !important;
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}
.btn-check:focus + .btn-light-secondary, .btn-light-secondary:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--secondary-rgba), 0.5) !important;
}
.btn-check:checked + .btn-light-secondary, .btn-check:active + .btn-light-secondary, .btn-light-secondary:active, .btn-light-secondary.active, .btn-light-secondary.dropdown-toggle.show {
  color: #fff;
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}
.btn-check:checked + .btn-light-secondary:focus, .btn-check:active + .btn-light-secondary:focus, .btn-light-secondary:active:focus, .btn-light-secondary.active:focus, .btn-light-secondary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--secondary-rgba), 0.5) !important;
}
.btn-light-secondary:disabled, .btn-light-secondary.disabled {
  color: var(--secondary) !important;
  background-color: transparent;
}

/*light-success*/
.btn-light-success {
  color: var(--success-dark);
  background-color: hsl(var(--success-hsl-1)  calc(var(--success-hsl-2) + 35%)) !important;  
  border-color: transparent !important;
}
.btn-light-success:hover {
  color: #fff !important;
  background-color: var(--success) !important;
  border-color: var(--success) !important;
}
.btn-check:focus + .btn-light-success, .btn-light-success:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--success-rgba), 0.5) !important;
}
.btn-check:checked + .btn-light-success, .btn-check:active + .btn-light-success, .btn-light-success:active, .btn-light-success.active, .btn-light-success.dropdown-toggle.show {
  color: #fff;
  background-color: var(--success) !important;
  border-color: var(--success) !important;
}
.btn-check:checked + .btn-light-success:focus, .btn-check:active + .btn-light-success:focus, .btn-light-success:active:focus, .btn-light-success.active:focus, .btn-light-success.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--success-rgba), 0.5) !important;
}
.btn-light-success:disabled, .btn-light-success.disabled {
  color: var(--success) !important;
  background-color: transparent;
}

/*light-danger*/
.btn-light-danger {
  color: var(--danger-dark);
  background-color: hsl(var(--danger-hsl-1)  calc(var(--danger-hsl-2) + 30%)) !important;  
  border-color: transparent !important;
}
.btn-light-danger:hover {
  color: #fff !important;
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.btn-check:focus + .btn-light-danger, .btn-light-danger:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgba), 0.5) !important;
}
.btn-check:checked + .btn-light-danger, .btn-check:active + .btn-light-danger, .btn-light-danger:active, .btn-light-danger.active, .btn-light-danger.dropdown-toggle.show {
  color: #fff;
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.btn-check:checked + .btn-light-danger:focus, .btn-check:active + .btn-light-danger:focus, .btn-light-danger:active:focus, .btn-light-danger.active:focus, .btn-light-danger.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgba), 0.5) !important;
}
.btn-light-danger:disabled, .btn-light-danger.disabled {
  color: var(--danger) !important;
  background-color: transparent;
}

/*light-warning*/
.btn-light-warning {
  color: var(--warning-dark);
  background-color: hsl(var(--warning-hsl-1)  calc(var(--warning-hsl-2) + 20%)) !important;  
  border-color: transparent !important;
}
.btn-light-warning:hover {
  color: #fff !important;
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}
.btn-check:focus + .btn-light-warning, .btn-light-warning:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--warning-rgba), 0.5) !important;
}
.btn-check:checked + .btn-light-warning, .btn-check:active + .btn-light-warning, .btn-light-warning:active, .btn-light-warning.active, .btn-light-warning.dropdown-toggle.show {
  color: #fff;
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}
.btn-check:checked + .btn-light-warning:focus, .btn-check:active + .btn-light-warning:focus, .btn-light-warning:active:focus, .btn-light-warning.active:focus, .btn-light-warning.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--warning-rgba), 0.5) !important;
}
.btn-light-warning:disabled, .btn-light-warning.disabled {
  color: var(--warning) !important;
  background-color: transparent;
}

/*light-info*/
.btn-light-info {
  color: var(--info-dark);
  background-color: hsl(var(--info-hsl-1)  calc(var(--info-hsl-2) + 35%)) !important;  
  border-color: transparent !important;
}
.btn-light-info:hover {
  color: #fff !important;
  background-color: var(--info) !important;
  border-color: var(--info) !important;
}
.btn-check:focus + .btn-light-info, .btn-light-info:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--info-rgba), 0.5) !important;
}
.btn-check:checked + .btn-light-info, .btn-check:active + .btn-light-info, .btn-light-info:active, .btn-light-info.active, .btn-light-info.dropdown-toggle.show {
  color: #fff;
  background-color: var(--info) !important;
  border-color: var(--info) !important;
}
.btn-check:checked + .btn-light-info:focus, .btn-check:active + .btn-light-info:focus, .btn-light-info:active:focus, .btn-light-info.active:focus, .btn-light-info.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--info-rgba), 0.5) !important;
}
.btn-light-info:disabled, .btn-light-info.disabled {
  color: var(--info) !important;
  background-color: transparent;
}

/*link-primary*/
.btn-link {
  font-weight: 400;
  color: var(--primary) !important;
  text-decoration: underline;
}
.btn-link:hover {
  color: var(--primary-dark) !important;
}
.btn-link:disabled, .btn-link.disabled {
  color:var(--secondary) !important;
}

/*link-secondary*/
.btn-link-secondary {
  font-weight: 400;
  color: var(--secondary) !important;
  text-decoration: underline;
}
.btn-link-secondary:hover {
  color: var(--secondary-dark) !important;
}
.btn-link-secondary:disabled, .btn-link.disabled {
  color:var(--secondary) !important;
}

/*link-success*/
.btn-link-success {
  font-weight: 400;
  color: var(--success) !important;
  text-decoration: underline;
}
.btn-link-success:hover {
  color: var(--success-dark) !important;
}
.btn-link-success:disabled, .btn-link.disabled {
  color:var(--secondary) !important;
}

/*link-danger*/
.btn-link-danger  {
  font-weight: 400;
  color: var(--danger) !important;
  text-decoration: underline;
}
.btn-link-danger:hover {
  color: var(--danger-dark) !important;
}
.btn-link-danger:disabled, .btn-link.disabled {
  color:var(--secondary) !important;
}

/*link-warning*/
.btn-link-warning {
  font-weight: 400;
  color: var(--warning) !important;
  text-decoration: underline;
}
.btn-link-warning:hover {
  color: var(--warning-dark) !important;
}
.btn-link-warning:disabled, .btn-link.disabled {
  color:var(--secondary) !important;
}

/*link-info*/
.btn-link-info {
  font-weight: 400;
  color: var(--info) !important;
  text-decoration: underline;
}
.btn-link-info:hover {
  color: var(--info-dark) !important;
}
.btn-link-info:disabled, .btn-link.disabled {
  color:var(--secondary) !important;
}

/*alerts*/
/*alert-primary*/
.alert-primary {
  color: var(--primary-dark);
  background-color: hsl(var(--primary-hsl-1)  calc(var(--primary-hsl-2) + 30%));
  border-color: hsl(var(--primary-hsl-1)  calc(var(--primary-hsl-2) + 25%));
}
.alert-primary .alert-link {
  color: var(--primary-dark);
}


/*alert-secondary*/
.alert-secondary {
  color: var(--secondary-dark);
  background-color: hsl(var(--secondary-hsl-1)  calc(var(--secondary-hsl-2) + 30%));
  border-color: hsl(var(--secondary-hsl-1)  calc(var(--secondary-hsl-2) + 25%));
}
.alert-secondary .alert-link {
  color: var(--secondary-dark);
}

/*alert-success*/
.alert-success {
  color: var(--success-dark);
  background-color: hsl(var(--success-hsl-1)  calc(var(--success-hsl-2) + 30%));
  border-color: hsl(var(--success-hsl-1)  calc(var(--success-hsl-2) + 15%));
}
.alert-success .alert-link {
  color: var(--success-dark);
}

/*alert-danger*/
.alert-danger {
  color: var(--danger-dark);
  background-color: hsl(var(--danger-hsl-1)  calc(var(--danger-hsl-2) + 30%));
  border-color: hsl(var(--danger-hsl-1)  calc(var(--danger-hsl-2) + 25%));
}
.alert-danger .alert-link {
  color: var(--danger-dark);
}

/*alert-warning*/
.alert-warning {
  color: var(--warning-dark);
  background-color: hsl(var(--warning-hsl-1)  calc(var(--warning-hsl-2) + 25%));
  border-color: hsl(var(--warning-hsl-1)  calc(var(--warning-hsl-2) + 20%));
}
.alert-warning .alert-link {
  color: var(--warning-dark);
}

/*alert-info*/
.alert-info {
  color: var(--info-dark);
  background-color: hsl(var(--info-hsl-1)  calc(var(--info-hsl-2) + 40%));
  border-color: hsl(var(--info-hsl-1)  calc(var(--info-hsl-2) + 30%));
}
.alert-info .alert-link {
  color: var(--info-dark);
}

/*alert-light*/
.alert-light {
  color: var(--dark);
  background-color: hsl(var(--light-hsl-1)  calc(var(--light-hsl-2) + 40%));
  border-color: hsl(var(--light-hsl-1)  calc(var(--light-hsl-2) + 35%));
}
.alert-light .alert-link {
  color: var(--dark);
}


/* NAV TABS*/
.nav-pills .nav-item {margin-right: 5px} 
.nav-pills .nav-item:last-of-type {margin-right: 0px !important}

/* NAV light */
.nav-light.nav-pills .nav-link.active, .nav-light.nav-pills .show>.nav-link	{background-color: var(--light) !important; color: var(--gray-dark)}
.nav-light .nav-link {color: var(--gray-light)}
.nav-light .nav-link:hover {background-color:var(--light); color: var(--gray-dark)}

/* NAV light-dark */
.nav-light-dark.nav-pills .nav-link.active, .nav-light-dark.nav-pills .show>.nav-link	{background-color: var(--light) !important; color: var(--gray-dark)}
.nav-light-dark .nav-link {color: var(--gray-dark)}
.nav-light-dark .nav-link:hover {background-color:var(--light); color: var(--gray-dark)}


/* NAV primary */
.nav-primary.nav-pills .nav-link.active, .nav-primary.nav-pills .show>.nav-link	{background-color: var(--primary) !important;}
.nav-primary .nav-link {color: var(--primary)}
.nav-primary .nav-link:hover {background-color:var(--primary); color: white}

/* NAV secondary */
.nav-secondary.nav-pills .nav-link.active, .nav-secondary.nav-pills .show>.nav-link	{background-color: var(--secondary) !important;}
.nav-secondary .nav-link {color: var(--secondary)}
.nav-secondary .nav-link:hover {background-color:var(--secondary); color: white}

/* NAV success */
.nav-success.nav-pills .nav-link.active, .nav-success.nav-pills .show>.nav-link	{background-color: var(--success) !important;}
.nav-success .nav-link {color: var(--success)}
.nav-success .nav-link:hover {background-color:var(--success); color: white}

/* NAV danger */
.nav-danger.nav-pills .nav-link.active, .nav-danger.nav-pills .show>.nav-link	{background-color: var(--danger) !important;}
.nav-danger .nav-link {color: var(--danger)}
.nav-danger .nav-link:hover {background-color:var(--danger); color: white}

/* NAV warning */
.nav-warning.nav-pills .nav-link.active, .nav-warning.nav-pills .show>.nav-link	{background-color: var(--warning) !important;}
.nav-warning .nav-link {color: var(--warning)}
.nav-warning .nav-link:hover {background-color:var(--warning); color: white}

/* NAV info */	
.nav-info.nav-pills .nav-link.active, .nav-info.nav-pills .show>.nav-link	{background-color: var(--info) !important;}
.nav-info .nav-link {color: var(--info)}
.nav-info .nav-link:hover {background-color:var(--info); color: white}

/* NAV primary-dark */
.nav-primary-dark.nav-pills .nav-link.active, .nav-primary-dark.nav-pills .show>.nav-link	{background-color: var(--primary-dark) !important;}
.nav-primary-dark .nav-link {color: var(--primary-dark)}
.nav-primary-dark .nav-link:hover {background-color:var(--primary-dark); color: white}

/* NAV secondary-dark */
.nav-secondary-dark.nav-pills .nav-link.active, .nav-secondary-dark.nav-pills .show>.nav-link	{background-color: var(--secondary-dark) !important;}
.nav-secondary-dark .nav-link {color: var(--secondary-dark)}
.nav-secondary-dark .nav-link:hover {background-color:var(--secondary-dark); color: white}

/* NAV success-dark */
.nav-success-dark.nav-pills .nav-link.active, .nav-success-dark.nav-pills .show>.nav-link	{background-color: var(--success-dark) !important;}
.nav-success-dark .nav-link {color: var(--success-dark)}
.nav-success-dark .nav-link:hover {background-color:var(--success-dark); color: white}

/* NAV warning-dark */
.nav-warning-dark.nav-pills .nav-link.active, .nav-warning-dark.nav-pills .show>.nav-link	{background-color: var(--warning-dark) !important;}
.nav-warning-dark .nav-link {color: var(--warning-dark)}
.nav-warning-dark .nav-link:hover {background-color:var(--warning-dark); color: white}

/* NAV danger-dark */
.nav-danger-dark.nav-pills .nav-link.active, .nav-danger-dark.nav-pills .show>.nav-link	{background-color: var(--danger-dark) !important;}
.nav-danger-dark .nav-link {color: var(--danger-dark)}
.nav-danger-dark .nav-link:hover {background-color:var(--danger-dark); color: white}

/* NAV info-dark */
.nav-info-dark.nav-pills .nav-link.active, .nav-info-dark.nav-pills .show>.nav-link	{background-color: var(--info-dark) !important;}
.nav-info-dark .nav-link {color: var(--info-dark)}
.nav-info-dark .nav-link:hover {background-color:var(--info-dark); color: white}

/* NAV dark */		
.nav-dark.nav-pills .nav-link.active, .nav-dark.nav-pills .show>.nav-link	{background-color: var(--dark) !important;}
.nav-dark .nav-link {color: var(--dark)}
.nav-dark .nav-link:hover {background-color:var(--dark); color: white}


/* Pagination */
.pagination .page-link {border: none !important; border-radius: 0.5rem !important; margin-right: 5px;}
.pagination .page-link, .page-item.disabled .page-link {background-color: transparent}
.pagination .page-item:last-of-type .page-link{margin-right: 0px;}
.page-item.disabled .page-link {color: var(--gray)}

/* Primary */
.pagination .page-link {color: var(--primary);} 
.pagination .page-item.active .page-link {background-color: var(--primary);}

/* Secondary */
.pagination.secondary .page-link {color: var(--gray);} 
.pagination.secondary .page-item.active .page-link, .pagination.secondary .page-item .page-link:hover {background-color: var(--gray); color: white}

/* Light */
.pagination.light .page-link {color: var(--light);} 
.pagination.light .page-item.active .page-link, .pagination.light .page-item .page-link:hover {background-color: var(--light); color: var(--gray)}

/* Grid - original cols + half cols */
.col {flex: 1 0 0%;}
.col-1 {flex: 0 0 auto; width: calc(var(--col) * 1);}
.col-2 {flex: 0 0 auto; width: calc(var(--col) * 2);}
.col-3 {flex: 0 0 auto; width: calc(var(--col) * 3);}
.col-4 {flex: 0 0 auto; width: calc(var(--col) * 4);}
.col-5 {flex: 0 0 auto; width: calc(var(--col) * 5);}
.col-6 {flex: 0 0 auto; width: calc(var(--col) * 6);}
.col-7 {flex: 0 0 auto; width: calc(var(--col) * 7);}
.col-8 {flex: 0 0 auto; width: calc(var(--col) * 8);}
.col-9 {flex: 0 0 auto; width: calc(var(--col) * 9);}
.col-10 {flex: 0 0 auto; width: calc(var(--col) * 10);}
.col-11 {flex: 0 0 auto; width: calc(var(--col) * 11);}
.col-12 {flex: 0 0 auto; width: calc(var(--col) * 12);}

.col-0half {flex: 0 0 auto; width: calc((var(--col) * 0) + var(--col-half));}
.col-1half {flex: 0 0 auto; width: calc((var(--col) * 1) + var(--col-half));}
.col-2half {flex: 0 0 auto; width: calc((var(--col) * 2) + var(--col-half));}
.col-3half {flex: 0 0 auto; width: calc((var(--col) * 3) + var(--col-half));}
.col-4half {flex: 0 0 auto; width: calc((var(--col) * 4) + var(--col-half));}
.col-5half {flex: 0 0 auto; width: calc((var(--col) * 5) + var(--col-half));}
.col-6half {flex: 0 0 auto; width: calc((var(--col) * 6) + var(--col-half));}
.col-7half {flex: 0 0 auto; width: calc((var(--col) * 7) + var(--col-half));}
.col-8half {flex: 0 0 auto; width: calc((var(--col) * 8) + var(--col-half));}
.col-9half {flex: 0 0 auto; width: calc((var(--col) * 9) + var(--col-half));}


@media (min-width: 576px) {
	.col-sm {flex: 1 0 0%;}	
	.col-sm-1 {flex: 0 0 auto; width: calc(var(--col) * 1);}
	.col-sm-2 {flex: 0 0 auto; width: calc(var(--col) * 2);}
	.col-sm-3 {flex: 0 0 auto; width: calc(var(--col) * 3);}
	.col-sm-4 {flex: 0 0 auto; width: calc(var(--col) * 4);}
	.col-sm-5 {flex: 0 0 auto; width: calc(var(--col) * 5);}
	.col-sm-6 {flex: 0 0 auto; width: calc(var(--col) * 6);}
	.col-sm-7 {flex: 0 0 auto; width: calc(var(--col) * 7);}
	.col-sm-8 {flex: 0 0 auto; width: calc(var(--col) * 8);}
	.col-sm-9 {flex: 0 0 auto; width: calc(var(--col) * 9);}
	.col-sm-10 {flex: 0 0 auto; width: calc(var(--col) * 10);}
	.col-sm-11 {flex: 0 0 auto; width: calc(var(--col) * 11);}
	.col-sm-12 {flex: 0 0 auto; width: calc(var(--col) * 12);}	
	.col-sm-0half {flex: 0 0 auto; width: calc((var(--col) * 0) + var(--col-half));}	
	.col-sm-1half {flex: 0 0 auto; width: calc((var(--col) * 1) + var(--col-half));}
	.col-sm-2half {flex: 0 0 auto; width: calc((var(--col) * 2) + var(--col-half));}
	.col-sm-3half {flex: 0 0 auto; width: calc((var(--col) * 3) + var(--col-half));}
	.col-sm-4half {flex: 0 0 auto; width: calc((var(--col) * 4) + var(--col-half));}
	.col-sm-5half {flex: 0 0 auto; width: calc((var(--col) * 5) + var(--col-half));}
	.col-sm-6half {flex: 0 0 auto; width: calc((var(--col) * 6) + var(--col-half));}
	.col-sm-7half {flex: 0 0 auto; width: calc((var(--col) * 7) + var(--col-half));}
	.col-sm-8half {flex: 0 0 auto; width: calc((var(--col) * 8) + var(--col-half));}
	.col-sm-9half {flex: 0 0 auto; width: calc((var(--col) * 9) + var(--col-half));}
}	

@media (min-width: 768px) {
	.col-md {flex: 1 0 0%;}	
	.col-md-1 {flex: 0 0 auto; width: calc(var(--col) * 1);}
	.col-md-2 {flex: 0 0 auto; width: calc(var(--col) * 2);}
	.col-md-3 {flex: 0 0 auto; width: calc(var(--col) * 3);}
	.col-md-4 {flex: 0 0 auto; width: calc(var(--col) * 4);}
	.col-md-5 {flex: 0 0 auto; width: calc(var(--col) * 5);}
	.col-md-6 {flex: 0 0 auto; width: calc(var(--col) * 6);}
	.col-md-7 {flex: 0 0 auto; width: calc(var(--col) * 7);}
	.col-md-8 {flex: 0 0 auto; width: calc(var(--col) * 8);}
	.col-md-9 {flex: 0 0 auto; width: calc(var(--col) * 9);}
	.col-md-10 {flex: 0 0 auto; width: calc(var(--col) * 10);}
	.col-md-11 {flex: 0 0 auto; width: calc(var(--col) * 11);}
	.col-md-12 {flex: 0 0 auto; width: calc(var(--col) * 12);}	
	.col-md-0half {flex: 0 0 auto; width: calc((var(--col) * 0) + var(--col-half));}	
	.col-md-1half {flex: 0 0 auto; width: calc((var(--col) * 1) + var(--col-half));}
	.col-md-2half {flex: 0 0 auto; width: calc((var(--col) * 2) + var(--col-half));}
	.col-md-3half {flex: 0 0 auto; width: calc((var(--col) * 3) + var(--col-half));}
	.col-md-4half {flex: 0 0 auto; width: calc((var(--col) * 4) + var(--col-half));}
	.col-md-5half {flex: 0 0 auto; width: calc((var(--col) * 5) + var(--col-half));}
	.col-md-6half {flex: 0 0 auto; width: calc((var(--col) * 6) + var(--col-half));}
	.col-md-7half {flex: 0 0 auto; width: calc((var(--col) * 7) + var(--col-half));}
	.col-md-8half {flex: 0 0 auto; width: calc((var(--col) * 8) + var(--col-half));}
	.col-md-9half {flex: 0 0 auto; width: calc((var(--col) * 9) + var(--col-half));}
}

@media (min-width: 992px) {
	.col-lg {flex: 1 0 0%;}	
	.col-lg-1 {flex: 0 0 auto; width: calc(var(--col) * 1);}
	.col-lg-2 {flex: 0 0 auto; width: calc(var(--col) * 2);}
	.col-lg-3 {flex: 0 0 auto; width: calc(var(--col) * 3);}
	.col-lg-4 {flex: 0 0 auto; width: calc(var(--col) * 4);}
	.col-lg-5 {flex: 0 0 auto; width: calc(var(--col) * 5);}
	.col-lg-6 {flex: 0 0 auto; width: calc(var(--col) * 6);}
	.col-lg-7 {flex: 0 0 auto; width: calc(var(--col) * 7);}
	.col-lg-8 {flex: 0 0 auto; width: calc(var(--col) * 8);}
	.col-lg-9 {flex: 0 0 auto; width: calc(var(--col) * 9);}
	.col-lg-10 {flex: 0 0 auto; width: calc(var(--col) * 10);}
	.col-lg-11 {flex: 0 0 auto; width: calc(var(--col) * 11);}
	.col-lg-12 {flex: 0 0 auto; width: calc(var(--col) * 12);}	
	.col-lg-0half {flex: 0 0 auto; width: calc((var(--col) * 0) + var(--col-half));}	
	.col-lg-1half {flex: 0 0 auto; width: calc((var(--col) * 1) + var(--col-half));}
	.col-lg-2half {flex: 0 0 auto; width: calc((var(--col) * 2) + var(--col-half));}
	.col-lg-3half {flex: 0 0 auto; width: calc((var(--col) * 3) + var(--col-half));}
	.col-lg-4half {flex: 0 0 auto; width: calc((var(--col) * 4) + var(--col-half));}
	.col-lg-5half {flex: 0 0 auto; width: calc((var(--col) * 5) + var(--col-half));}
	.col-lg-6half {flex: 0 0 auto; width: calc((var(--col) * 6) + var(--col-half));}
	.col-lg-7half {flex: 0 0 auto; width: calc((var(--col) * 7) + var(--col-half));}
	.col-lg-8half {flex: 0 0 auto; width: calc((var(--col) * 8) + var(--col-half));}
	.col-lg-9half {flex: 0 0 auto; width: calc((var(--col) * 9) + var(--col-half));}
}	

@media (min-width: 1200px) {
	.col-xl {flex: 1 0 0%;}	
	.col-xl-1 {flex: 0 0 auto; width: calc(var(--col) * 1);}
	.col-xl-2 {flex: 0 0 auto; width: calc(var(--col) * 2);}
	.col-xl-3 {flex: 0 0 auto; width: calc(var(--col) * 3);}
	.col-xl-4 {flex: 0 0 auto; width: calc(var(--col) * 4);}
	.col-xl-5 {flex: 0 0 auto; width: calc(var(--col) * 5);}
	.col-xl-6 {flex: 0 0 auto; width: calc(var(--col) * 6);}
	.col-xl-7 {flex: 0 0 auto; width: calc(var(--col) * 7);}
	.col-xl-8 {flex: 0 0 auto; width: calc(var(--col) * 8);}
	.col-xl-9 {flex: 0 0 auto; width: calc(var(--col) * 9);}
	.col-xl-10 {flex: 0 0 auto; width: calc(var(--col) * 10);}
	.col-xl-11 {flex: 0 0 auto; width: calc(var(--col) * 11);}
	.col-xl-12 {flex: 0 0 auto; width: calc(var(--col) * 12);}	
	.col-xl-0half {flex: 0 0 auto; width: calc((var(--col) * 0) + var(--col-half));}	
	.col-xl-1half {flex: 0 0 auto; width: calc((var(--col) * 1) + var(--col-half));}
	.col-xl-2half {flex: 0 0 auto; width: calc((var(--col) * 2) + var(--col-half));}
	.col-xl-3half {flex: 0 0 auto; width: calc((var(--col) * 3) + var(--col-half));}
	.col-xl-4half {flex: 0 0 auto; width: calc((var(--col) * 4) + var(--col-half));}
	.col-xl-5half {flex: 0 0 auto; width: calc((var(--col) * 5) + var(--col-half));}
	.col-xl-6half {flex: 0 0 auto; width: calc((var(--col) * 6) + var(--col-half));}
	.col-xl-7half {flex: 0 0 auto; width: calc((var(--col) * 7) + var(--col-half));}
	.col-xl-8half {flex: 0 0 auto; width: calc((var(--col) * 8) + var(--col-half));}
	.col-xl-9half {flex: 0 0 auto; width: calc((var(--col) * 9) + var(--col-half));}
}	


.input-icon .form-control, .form-select {
	border: 1px solid rgba(var(--gray-rgba), 0.5) !important;
	border-radius: 0.75rem !important;
	color: var(--gray-dark) !important;
}	

.form-select {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234a4b64' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");	
}

.form-control::-moz-placeholder { color: var(--gray-light);opacity: 1;}
.form-control::placeholder {color: var(--gray-light);opacity: 1;}