/* @toggle switch elements 
-------------------------------------------------- */
.switch {
	cursor:pointer; 
	position: relative; 
	padding-right:10px;
    display: inline-block;
	margin-bottom:5px;
	height: 26px;
}

.switch > .switch-label {
	cursor:pointer;
    display: inline-block;
    position: relative;
    height: 25px;
	width: 58px;
	color: #fff;
    font-size: 10px;
    font-weight: bold;
	line-height: 20px;
    text-align: center;
    background: #B5C1C7;
    border: 2px solid #B5C1C7;
	text-transform: uppercase;
	font-family:Helvetica, Arial, sans-serif;

    -webkit-transition: 0.3s ease-out;
       -moz-transition: 0.3s ease-out;
		 -o-transition: 0.3s ease-out;
			transition: 0.3s ease-out;

	-webkit-border-radius: 2px;
	   -moz-border-radius: 2px;
		 -o-border-radius: 2px;
			border-radius: 2px;	
}
.switch > .switch-label + span{ 
	display:inline-block; 
	padding-left:5px; 
	position:relative; top:-7px; 
}
.switch > .switch-label:before {
    content: attr(data-off);
    position: absolute;
    top: 1px;
    right: 3px;
    width: 33px;
}

.switch > .switch-label:after {
	content:"";	
    margin: 1px;
    width: 19px;
    height: 19px;
	display: block;
    background: #fff;
    -webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	-o-border-radius: 1px;
	border-radius: 1px;
}

.switch > input {
	-webkit-appearance: none;
	position: absolute;
    width: inherit;
    height: inherit;
    opacity: 0;
	left: 0;
	top: 0;
   
}

/* @toggle switch focus state 
-------------------------------------------------------------- */
.switch > input:focus { 
	outline: none; 
}
.switch > input:focus + .switch-label { 
	color: #fff; border-color: #a1a6a9; background:#a1a6a9; 
}
.switch > input:focus + .switch-label:after { 
	background: #fff; 
}

/* @toggle switch normal state 
--------------------------------------------------------------- */
.switch > input:checked + .switch-label {
    border-color: #333;
	background: #333; 
	padding-left: 33px;
	color: white;
}
	.switch.switch-success > input:checked + .switch-label {
		border-color:#4cae4c;
		background:#4cae4c;
	}
	.switch.switch-danger > input:checked + .switch-label {
		border-color:#d43f3a;
		background:#d43f3a;
	}
	.switch.switch-warning > input:checked + .switch-label {
		border-color:#eea236;
		background:#eea236;
	}
	.switch.switch-info > input:checked + .switch-label {
		border-color:#46b8da;
		background:#46b8da;
	}
	.switch.switch-default > input:checked + .switch-label {
		border-color:rgba(0,0,0,0.1);
		background:rgba(0,0,0,0.1);
	}
	.switch.switch-default > input:checked + .switch-label:before {
		color:#888;
	}

.switch > input:checked + .switch-label:before {
    content: attr(data-on);
    left: 1px;
	top:1px;
}

.switch > input:checked + .switch-label:after {
    margin: 1px;
    width: 19px;
    height: 19px;
    background: white;
}



/* @toggle switch normal state focus 
--------------------------------------------------------------------------------- */
.switch-round > .switch-label { 
	-webkit-border-radius: 13px;
	   -moz-border-radius: 13px;
		 -o-border-radius: 13px;
			border-radius: 13px; 
}
.switch-round > .switch-label + span{ 
	top:-2px; 
}	
.switch-round > .switch-label:before { 
	width: 33px; 
}
.switch-round > .switch-label:after {
    width: 19px;
	color:#B5C1C7;
	content: "\2022";
	font:20px/20px Times, Serif;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	-o-border-radius: 13px;
	border-radius: 13px;
}

.switch-round > input:checked + .switch-label { 
	padding-left: 33px; 
}
.switch-round > input:checked + .switch-label:after{ 
	color:#333; 
}