/*
* Mie Customizer Framework Styles
* @author alispx
**/
@import "compass/css3";

.customize-control {
	margin-bottom: 20px;
	
	.wp-picker-container input[type=text].wp-color-picker {
		padding: 3px 5px !important;
		min-height: 18px;
	}

	input[type=email], 
	input[type=number], 
	input[type=password], 
	input[type=search], 
	input[type=tel], 
	input[type=text], 
	input[type=url],
	input[type=date],
	textarea,
	select {
		border-radius: 3px;
		border: 1px solid #ccc;
		background-color: #fff;
		min-height: 35px;
		margin: 0;
		padding: 6px 8px;
		width: 100%;
	}
	input[type=checkbox], 
	input[type=radio] {
		border: 1px solid #bbb;
		background: #fff;
		color: #555;
		clear: none;
		cursor: pointer;
		display: inline-block;
		line-height: 0;
		height: 16px;
		margin: -4px 4px 0 0;
		min-width: 16px;
		outline: 0;
		padding: 0!important;
		text-align: center;
		vertical-align: middle;
		width: 16px;
		-webkit-appearance: none;
		@include transition(.05s border-color ease-in-out);
	}

	/* Slider Element */
	.mie-slider {
		width: 75% !important;
		display: inline-block;
	}
	.mie-slider-value {
		width: 20% !important;
		min-height: 30px !important;
	}
}

.chosen-drop{
    position: relative!important;
    display: none;
}
.chosen-container-active.chosen-with-drop .chosen-drop {
	display: block
}

.chosen-container-single .chosen-single {
	padding: 3px 0 2px 8px !important;
  	height: 35px !important;

  	div {
  		top:5px !important;
  	}
}

.image-radio-control{
	.control-image{
		position: relative;
		display: block;

		img{
			width:100%;
			max-width: 100%;
		}

		&:after{
			content:" ";
			position: absolute;
			top:0;
			left:0;
			right: 0;
			bottom:0;

			background: rgba(255,255,255,.5);
			box-shadow: inset 0 0 0 5px #2ea2cc;
			opacity:0;
			transition: .2s ease;
			z-index: 1;
		}
	}
	input:checked ~ .control-image{
		&:after{
			opacity: 1;
		}
	}
}