// Checkboxes
html.dark .checkbox-primary,
.checkbox-primary {

	label:before {
		background: @color-primary;
		border-color: darken(@color-primary, 5%);
	}
}

html.dark .checkbox-text-primary,
.checkbox-text-primary {
	input[type="checkbox"]:checked + label:after {
		color: @color-primary;
	}
}

// Radios
html.dark .radio-primary,
.radio-primary {

	input[type="radio"]:checked + label:after {
		background: @color-primary;
		box-shadow: 0px 0px 1px @color-primary;
	}

}

// Switch
.switch {
	&.switch-primary {
		.ios-switch .on-background {
			background: @color-primary;
		}
	}
}

// Progress Bar
.progress-bar {
	background-color: @color-primary;
}

.progress {
	.progress-bar-primary {
		background-color: @color-primary;
	}
}

// Slider
.slider-primary {
	.ui-slider-range,
	.ui-slider-handle {
		background: @color-primary;
	}
}

.slider-gradient.slider-primary {
	.ui-slider-range,
	.ui-slider-handle {
		background-image: linear-gradient(to left, lighten(@color-primary, 10%) 0, @color-primary 50%, darken(@color-primary, 10%) 100%);
	}
}

.slider-gradient.ui-slider-vertical.slider-primary {
	.ui-slider-range,
	.ui-slider-handle {
		background-image: linear-gradient(to right, lighten(@color-primary, 10%) 0, @color-primary 50%, darken(@color-primary, 10%) 100%);
	}
}

// DatePicker
.datepicker {
	thead tr:first-child th:hover,
	tfoot tr th:hover,
	table tr td span:hover {
		background: @color-primary;
	}

	.datepicker-switch,
	.prev,
	.next {
		&:hover {
			background: @color-primary;
		}
	}

	table {
		tbody {
			tr {
				td {
					&.day {
						&:hover {
							background: @color-primary;
						}

						&.active {
							background: darken( @color-primary, 10% );
						}
					}
				}
			}
		}
	}
}

// Datepicker - Skin Dark
html:not(.sidebar-light) {
	.datepicker.datepicker-dark {
		background: transparent;

		table {
			tbody {
				tr {
					td {
						&.day {
							&:hover {
								background: @color-primary;
							}

							&.active {
								background: darken( @color-primary, 10% );
							}
						}
					}
				}
			}
		}

	}
}

// Datepicker - Skin Primary
.datepicker.datepicker-primary {
	table {
		thead {
			tr {
				&:first-child {
					background-color: @color-primary;

					th {
						&:hover {
							background-color: darken(@color-primary, 10%);
						}
					}
				}

				&:last-child {
					background-color: lighten(@color-primary, 5%);

					th:hover {
						background-color: @color-primary;
					}
				}
			}
		}
	}
}

// Select 2
.select2-container-multi {
	.select2-choices .select2-search-choice {
		background: @color-primary;
	}
}

// Wizard
.wizard-steps {
	> li {

		&.active {

			.badge {
				background-color: @color-primary;
			}

			a {
				&,
				&:hover,
				&:focus {
					border-top-color: @color-primary;
				}
			}

		}

	}
}

.wizard-tabs {
	ul {
		> li {

			&.active {
				.badge {
					background-color: @color-primary;
				}
			}

		}
	}
}

html,
html.dark {
	.wizard-progress {

		.steps-progress {
			.progress-indicator {
				background: @color-primary;
			}
		}

		.wizard-steps {
			li {
				&.completed {
					a {
						span {
							border-color: @color-primary;
							background: @color-primary;
						}
					}
				}
				&.active {
					a {
						span {
							color: @color-primary;
							border-color: @color-primary;
						}
					}
				}
			}
		}
	}
}

// Tables
.table > thead > tr > td.primary,
.table > tbody > tr > td.primary,
.table > tfoot > tr > td.primary,
.table > thead > tr > th.primary,
.table > tbody > tr > th.primary,
.table > tfoot > tr > th.primary,
.table > thead > tr.primary > td,
.table > tbody > tr.primary > td,
.table > tfoot > tr.primary > td,
.table > thead > tr.primary > th,
.table > tbody > tr.primary > th,
.table > tfoot > tr.primary > th {
	background-color: @color-primary !important;
}

// Data Tables Loading
.dataTables_processing {
	background-color: @color-primary;
}

// Liquid Meter
.liquid-meter-wrapper {
	.liquid-meter-selector {
		a {
			&.active {
				color: @color-primary;
			}
		}
	}
}

// Multi Select
.multiselect-container > .active > a, 
.multiselect-container > .active > a:hover, 
.multiselect-container > .active > a:focus {
	background-color: @color-primary;
}