.pretty-checkbox {
	position:relative;
	display: inline-block;
	
	> input[type=checkbox] { 
		display:none;

		&:checked ~ label [class^='unch'] { 
	 		opacity:0;

	 		&:before, &:after {
	  			background-color: #fff;
	  		}
		}

		&:checked ~ label [class^='ch'] {
	  		opacity:1;

	  		&:before, &:after {
	  			background-color: #fff;
	  		}
		}
	}

	> label {
		cursor:pointer;
		padding: 0 0 13px 26px;

		> span { 
			display:block;
			position:absolute;
			left:0; 
		    transition-duration:0.2s;
		  	background-color: @panel-box-background;
		  	height:23px; 
		  	width:23px;
		}

		> .unch-top {
		  	border-top: 3px solid @panel-heading-color;
		}

		> .ch-top {
		  	border-top: 3px solid #fff;
		}

		> .unch-right {
		  	border-right: 3px solid @panel-heading-color;
		}

		> .ch-right {
		  	border-right: 3px solid #fff;
		}

		> .unch-left {
		  	border-left: 3px solid @panel-heading-color;
		}

		> .ch-left {
		  	border-left: 3px solid #fff;
		}

		> .unch-bottom {
		  	border-bottom: 3px solid @panel-heading-color;
		}

		> .ch-bottom {
		  	border-bottom: 3px solid #fff;
		}

		> .unch-all {
		  	border: 3px solid @panel-heading-color;
		}

		> .ch-all {
		  	border: 3px solid #fff;
		}
	}
}

.border-bottom-left {
	position: relative;
	border: none !important;
	&:before {content:''; background: @panel-heading-color; z-index: 100; position: absolute; bottom: 0; left: 0; width: 50%; height: 3px;}
	&:after {content:''; background: @panel-heading-color; z-index: 100; position: absolute; bottom: 0; left: 0; height: 50%; width: 3px;}
}

.border-top-left {
	position: relative;
	border: none !important;
	&:before {content:''; background: @panel-heading-color; z-index: 100; position: absolute; top: 0; left: 0; width: 50%; height: 3px;}
	&:after {content:''; background: @panel-heading-color; z-index: 100; position: absolute; top: 0; left: 0; height: 50%; width: 3px;}
}

.border-bottom-right {
	position: relative;
	border: none !important;
	&:before {content:''; background: @panel-heading-color; z-index: 100; position: absolute; bottom: 0; right: 0; width: 50%; height: 3px;}
	&:after {content:''; background: @panel-heading-color; z-index: 100; position: absolute; bottom: 0; right: 0; height: 50%; width: 3px;}
}

.border-top-right {
	position: relative;
	border: none !important;
	&:before {content:''; background: @panel-heading-color; z-index: 100; position: absolute; top: 0; right: 0; width: 50%; height: 3px;}
	&:after {content:''; background: @panel-heading-color; z-index: 100; position: absolute; top: 0; right: 0; height: 50%; width: 3px;}
}
