// 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 {
		thead {
			tr:last-child {
				th {
					&:hover {
						color: @color-primary;
					}
				}
			}
		}
		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;
						color: @color-primary-inverse;
					}
				}
			}
		}
	}
}

// Select 2
.select2-container-multi {
	.select2-choices .select2-search-choice {
		background: @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;
}