﻿.switch {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 17px;
}

	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

.slider {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
}

	.slider:before {
		position: absolute;
		content: "";
		height: 13px;
		width: 13px;
		left: 2px;
		bottom: 2px;
		background-color: white;
	}

input:checked + .slider {
	background-color: #0f54b9;
}

input[type="checkbox"]:disabled:checked + span.slider {
	background-color: #0f54b9 !important;
}

input:focus + .slider {
	box-shadow: 0 0 1px #0f54b9;
}

input:checked + .slider:before {
	-webkit-transform: translateX(13px);
	-ms-transform: translateX(13px);
	transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 17px;
}

.slider.round:before {
	border-radius: 50%;
}

/* New tooltip with a link */
.tooltip-container {
	display: inline-block;
	position: relative;
}

.tooltip2 {
	visibility: hidden;
	width: 200px;
	background: white;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 10px;
	position: absolute;
	top: 125%;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	z-index: 1000;
}

	.tooltip2:after {
		content: "";
		position: absolute;
		bottom: 100%;
		left: 50%;
		margin-left: -10px;
		border-width: 10px;
		border-style: solid;
		border-color: transparent transparent white;
	}

.tooltip-container:hover .tooltip2 {
	visibility: visible;
}

.tooltip2 a {
	color: #0066cc;
	text-decoration: underline;
	display: block;
	margin: 5px 0;
}

.tooltip2 a:hover {
	color: #004499;
}

.align_right {
	float: right
}