/* ==========================================
   GLOBAL / BASE SKIN STYLES
   ========================================== */
.bg-primary {
	background-color: var(--bs-primary) !important;
}

.text-primary,
.link-primary,
.page-link {
	color: var(--bs-primary) !important;
}

.card.card-primary {
	border-top-color: var(--bs-primary) !important;
}

.btn-primary {
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
}

.btn-outline-primary {
	color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover,
.btn-check:checked+.btn-primary,
.btn-check:checked+.btn-outline-primary,
.btn-outline-primary.show,
.page-item.active .page-link {
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
	color: #fff !important;
}

.btn-check:focus+.btn-primary,
.btn-check:focus+.btn-outline-primary,
.form-check-input:focus {
	border-color: var(--bs-primary) !important;
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

.form-check-input:checked,
.list-group-item.active {
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
}


/* ==========================================
   SKIN RED
   ========================================== */
.skin-red {
	--bs-primary: #dd4b39;
	--bs-primary-rgb: 221, 75, 57;
	--bs-primary-dark: #d73925;
}

.skin-red .app-header {
	--bs-primary: #dd4b39;
	--bs-primary-rgb: 221, 75, 57;
	--bs-bg-opacity: 1;
}

.skin-red .sidebar-brand {
	background-color: #dd4b39 !important;
}

.skin-red .link-primary:hover {
	color: var(--bs-primary-dark) !important;
}

.skin-red .btn-check:checked + .btn-primary:hover, 
.skin-red .btn-check:checked + .btn-outline-primary:hover,
.skin-red .btn-primary:hover, 
.skin-red .btn-primary:focus, 
.skin-red .btn-primary:active,
.skin-red .btn-outline-primary.show {
	background-color: var(--bs-primary-dark) !important;
	border-color: var(--bs-primary-dark) !important;
	color: #fff !important;
}

.skin-red .page-link:hover, 
.skin-red .page-link:focus {
	color: var(--bs-primary-dark) !important;
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}


/* ==========================================
   SKIN BLACK
   ========================================== */
.skin-black {
	--bs-primary: #222222;
	--bs-primary-rgb: 34, 34, 34;
	--bs-primary-dark: #111111;
}

.skin-black .app-header {
	--bs-primary: #222222;
	--bs-primary-rgb: 34, 34, 34;
	--bs-bg-opacity: 1;
}

.skin-black .sidebar-brand {
	background-color: #222222 !important;
}

.skin-black .link-primary:hover {
	color: var(--bs-primary-dark) !important;
}

.skin-black .btn-check:checked + .btn-primary:hover, 
.skin-black .btn-check:checked + .btn-outline-primary:hover,
.skin-black .btn-primary:hover, 
.skin-black .btn-primary:focus, 
.skin-black .btn-primary:active,
.skin-black .btn-outline-primary.show {
	background-color: var(--bs-primary-dark) !important;
	border-color: var(--bs-primary-dark) !important;
	color: #fff !important;
}

.skin-black .page-link:hover, 
.skin-black .page-link:focus {
	color: var(--bs-primary-dark) !important;
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}


/* ==========================================
   SKIN BLUE
   ========================================== */
.skin-blue {
	--bs-primary: #3c8dbc;
	--bs-primary-rgb: 60, 141, 188;
	--bs-primary-dark: #367fa9;
}

.skin-blue .app-header {
	--bs-primary: #3c8dbc;
	--bs-primary-rgb: 60, 141, 188;
	--bs-bg-opacity: 1;
}

.skin-blue .sidebar-brand {
	background-color: #3c8dbc !important;
}

.skin-blue .link-primary:hover {
	color: var(--bs-primary-dark) !important;
}

.skin-blue .btn-check:checked + .btn-primary:hover, 
.skin-blue .btn-check:checked + .btn-outline-primary:hover,
.skin-blue .btn-primary:hover, 
.skin-blue .btn-primary:focus, 
.skin-blue .btn-primary:active,
.skin-blue .btn-outline-primary.show {
	background-color: var(--bs-primary-dark) !important;
	border-color: var(--bs-primary-dark) !important;
	color: #fff !important;
}

.skin-blue .page-link:hover, 
.skin-blue .page-link:focus {
	color: var(--bs-primary-dark) !important;
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}


/* ==========================================
   SKIN GREEN
   ========================================== */
.skin-green {
	--bs-primary: #00a65a;
	--bs-primary-rgb: 0, 166, 90;
	--bs-primary-dark: #008d4c;
}

.skin-green .app-header {
	--bs-primary: #00a65a;
	--bs-primary-rgb: 0, 166, 90;
	--bs-bg-opacity: 1;
}

.skin-green .sidebar-brand {
	background-color: #00a65a !important;
}

.skin-green .link-primary:hover {
	color: var(--bs-primary-dark) !important;
}

.skin-green .btn-check:checked + .btn-primary:hover, 
.skin-green .btn-check:checked + .btn-outline-primary:hover,
.skin-green .btn-primary:hover, 
.skin-green .btn-primary:focus, 
.skin-green .btn-primary:active,
.skin-green .btn-outline-primary.show {
	background-color: var(--bs-primary-dark) !important;
	border-color: var(--bs-primary-dark) !important;
	color: #fff !important;
}

.skin-green .page-link:hover, 
.skin-green .page-link:focus {
	color: var(--bs-primary-dark) !important;
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}


/* ==========================================
   SKIN YELLOW
   ========================================== */
.skin-yellow {
	--bs-primary: #f39c12;
	--bs-primary-rgb: 243, 156, 18;
	--bs-primary-dark: #e08e0b;
}

.skin-yellow .app-header {
	--bs-primary: #f39c12;
	--bs-primary-rgb: 243, 156, 18;
	--bs-bg-opacity: 1;
}

.skin-yellow .sidebar-brand {
	background-color: #f39c12 !important;
}

.skin-yellow .link-primary:hover {
	color: var(--bs-primary-dark) !important;
}

.skin-yellow .btn-check:checked + .btn-primary:hover, 
.skin-yellow .btn-check:checked + .btn-outline-primary:hover,
.skin-yellow .btn-primary:hover, 
.skin-yellow .btn-primary:focus, 
.skin-yellow .btn-primary:active,
.skin-yellow .btn-outline-primary.show {
	background-color: var(--bs-primary-dark) !important;
	border-color: var(--bs-primary-dark) !important;
	color: #fff !important;
}

.skin-yellow .page-link:hover, 
.skin-yellow .page-link:focus {
	color: var(--bs-primary-dark) !important;
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}


/* ==========================================
   SKIN PURPLE
   ========================================== */
.skin-purple {
	--bs-primary: #6648dc;
	--bs-primary-rgb: 102, 72, 220;
	--bs-primary-dark: #5a32a3;
}

.skin-purple .app-header {
	--bs-primary: #605ca8;
	--bs-primary-rgb: 96, 92, 168;
	--bs-bg-opacity: 1;
}

.skin-purple .sidebar-brand {
	background-color: #605ca8 !important;
}

.skin-purple .link-primary:hover {
	color: var(--bs-primary-dark) !important;
}

.skin-purple .btn-check:checked+.btn-primary:hover, 
.skin-purple .btn-check:checked+.btn-outline-primary:hover {
	background-color: var(--bs-primary-dark) !important;
	border-color: var(--bs-primary-dark) !important;
}

.skin-purple .btn-primary:hover,
.skin-purple .btn-primary:focus, 
.skin-purple .btn-primary:active,
.skin-purple .btn-outline-primary.show {
	background-color: var(--bs-primary-dark) !important;
	color: #fff !important;
}

.skin-purple .page-link:hover, 
.skin-purple .page-link:focus {
	color: var(--bs-primary-dark) !important;
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}