.jq-checkbox
.jq-radio
	vertical-align -4px
	width 16px
	height 16px
	margin 0 4px 0 0
	border 1px solid #C3C3C3
	background linear-gradient(#FFF, #E6E6E6)
	box-shadow 0 1px 1px rgba(0,0,0,.05), inset -1px -1px #FFF, inset 1px -1px #FFF
	cursor pointer
	&.focused
		border 1px solid #08C
	&.disabled
		opacity .55

.jq-checkbox
	border-radius 3px
	&.checked
		.jq-checkbox__div
			width 8px
			height 4px
			margin 3px 0 0 3px
			border-left 2px solid #666
			border-bottom 2px solid #666
			transform rotate(-50deg)

.jq-radio
	border-radius 50%
	&.checked
		.jq-radio__div
			width 10px
			height 10px
			margin 3px 0 0 3px
			border-radius 50%
			background #777
			box-shadow inset 1px 1px 1px rgba(0,0,0,.7)

.jq-file
	width 270px
	border-radius 4px
	box-shadow 0 1px 2px rgba(0,0,0,.1)
	input
		cursor pointer
	&__name
		box-sizing border-box
		width 100%
		height 34px
		padding 0 80px 0 10px
		border 1px solid #CCC
		border-bottom-color #B3B3B3
		border-radius 4px
		background #FFF
		box-shadow inset 1px 1px #F1F1F1
		font 14px/32px Arial, sans-serif
		color #333
	&__browse
		position absolute
		top 1px
		right 1px
		padding 0 10px
		border-left 1px solid #CCC
		border-radius 0 4px 4px 0
		background linear-gradient(#FFF, #E6E6E6)
		box-shadow inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,.1)
		font 14px/32px Arial, sans-serif
		color #333
		text-shadow 1px 1px #FFF
	&:hover
		.jq-file__browse
			background linear-gradient(#F6F6F6, #E6E6E6)
	&:active
		.jq-file__browse
			background #F5F5F5
			box-shadow inset 1px 1px 3px #DDD
	&.focused
		.jq-file__name
			border 1px solid #5794BF
	&.disabled
	&.disabled .jq-file__name
	&.disabled .jq-file__browse
		border-color #CCC
		background #F5F5F5
		box-shadow none
		color #888

.jq-number
	position relative
	vertical-align middle
	padding 0 36px 0 0
	&__field
		width 100px
		border 1px solid #CCC
		border-bottom-color #B3B3B3
		border-radius 4px
		box-shadow inset 1px 1px #F1F1F1, 0 1px 2px rgba(0,0,0,.1)
		&:hover
			border-color #B3B3B3
		input
			box-sizing border-box
			width 100%
			padding 8px 9px
			border none
			outline none
			background none
			font 14px Arial, sans-serif
			color #333
	&__spin
		position absolute
		top 0
		right 0
		width 32px
		height 14px
		border 1px solid #CCC
		border-bottom-color #B3B3B3
		border-radius 4px
		background linear-gradient(#FFF, #E6E6E6)
		box-shadow 0 1px 2px rgba(0,0,0,.1)
		box-shadow inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,.1)
		user-select none
		text-shadow 1px 1px #FFF
		cursor pointer
		&.minus
			top auto
			bottom 0
		&:hover
			background linear-gradient(#F6F6F6, #E6E6E6)
		&:active
			background #F5F5F5
			box-shadow inset 1px 1px 3px #DDD
		&:after
			content ''
			position absolute
			top 4px
			left 11px
			width 0
			height 0
			border-right 5px solid transparent
			border-bottom 5px solid #999
			border-left 5px solid transparent
		&.minus
			&:after
				top 5px
				border-top 5px solid #999
				border-right 5px solid transparent
				border-bottom none
				border-left 5px solid transparent
			&:hover
				&:after
					border-top-color #000
		&.plus
			&:hover
				&:after
					border-bottom-color #000
	&.focused .jq-number__field
		border 1px solid #5794BF
	&.disabled .jq-number__field,
	&.disabled .jq-number__spin
		border-color #CCC
		background #F5F5F5
		box-shadow none
		color #888
	&.disabled .jq-number__spin
		&:after
			border-bottom-color #AAA
		&.minus
			&:after
				border-top-color #AAA

.jq-selectbox
	vertical-align middle
	cursor pointer
	&__select
		height 32px
		padding 0 45px 0 10px
		border 1px solid #CCC
		border-bottom-color #B3B3B3
		border-radius 4px
		background linear-gradient(#FFF, #E6E6E6)
		box-shadow inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,.1)
		font 14px/32px Arial, sans-serif
		color #333
		text-shadow 1px 1px #FFF
		&:hover
			background linear-gradient(#F6F6F6, #E6E6E6)
		&:active
			background #F5F5F5
			box-shadow inset 1px 1px 3px #DDD
	&.focused
		.jq-selectbox__select
			border 1px solid #5794BF
	&.disabled
		.jq-selectbox__select
			border-color #CCC
			background #F5F5F5
			box-shadow none
			color #888
	&__select-text
		display block
		width 100%
	.placeholder
		color #888
	&__trigger
		position absolute
		top 0
		right 0
		width 34px
		height 100%
		border-left 1px solid #CCC
		&-arrow
			position absolute
			top 14px
			right 12px
			width 0
			height 0
			border-top 5px solid #999
			border-right 5px solid transparent
			border-left 5px solid transparent
	&:hover
		.jq-selectbox__trigger-arrow
			border-top-color #000
	&.disabled
		.jq-selectbox__trigger-arrow
			border-top-color #AAA
	&__dropdown
		box-sizing border-box
		width 100%
		margin 2px 0 0
		padding 0
		border 1px solid #CCC
		border-radius 4px
		background #FFF
		box-shadow 0 2px 10px rgba(0,0,0,.2)
		font 14px/18px Arial, sans-serif
	&__search
		margin 5px
		input
			box-sizing border-box
			width 100%
			margin 0
			padding 5px 27px 6px 8px
			border 1px solid #CCC
			border-radius 3px
			outline none
			background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNqU078LAXEYx/FzYfNzk5TJaFNKYjFYSQZ/hvwBsvg1UCY2xT9gM8hukQGThWRjkcFw3pdnujhfT736Xn2fPvfc3fd07V0OFDDFAnM0ENYsZRiGLSc9OpqIYIA9fMhhjCrW2h9VlMlcH/aymMGtOqEugX08PwQucUZKdTozMIqdTc9WepQD7wjY9ARx+ydwhfyXfS+S0qMcOEQJGcueB3VccFINdMgal6NzkmPjRwJXxDBB7/2RDdtAp6wb+dpphHDASG5QQ0V6u2aoSqBZD/lDrNWRJynLK2qpBn4rc6K2XB9/Nb8EGABtf1thzY6X2AAAAABJRU5ErkJggg==') no-repeat 100% 50%
			box-shadow inset 1px 1px #F1F1F1
			color #333
	&__not-found
		margin 5px
		padding 5px 8px 6px
		background #F0F0F0
		font-size 13px
	ul
		margin 0
		padding 0
	li
		min-height 18px
		padding 5px 10px 6px
		color #231F20
		&.selected
			background-color #A3ABB1
			color #FFF
		&:hover
			background-color #08C
			color #FFF
		&.disabled
			color #AAA
			&:hover
				background none
		&.optgroup
			font-weight bold
			&:hover
				background none
				color #231F20
				cursor default
		&.option
			padding-left 25px

.jq-select-multiple
	box-sizing border-box
	padding 1px
	border 1px solid #CCC
	border-bottom-color #B3B3B3
	border-radius 4px
	background #FFF
	box-shadow inset 1px 1px #F1F1F1, 0 1px 2px rgba(0,0,0,.1)
	font 14px/18px Arial, sans-serif
	color #333
	cursor default
	&.focused
		border 1px solid #5794BF
	&.disabled
		border-color #CCC
		background #F5F5F5
		box-shadow none
		color #888
	ul
		margin 0
		padding 0
	li
		padding 3px 9px 4px
		list-style none
		&:first-child
			border-radius 3px 3px 0 0
		&:last-child
			border-radius 0 0 3px 3px
		&.selected
			background #08C
			color #FFF
		&.disabled
			color #AAA
		&.optgroup
			font-weight bold
		&.option
			padding-left 25px
	&.disabled li.selected,
	li.selected.disabled
		background #CCC
		color #FFF

input[type="email"].styler,
input[type="password"].styler,
input[type="search"].styler,
input[type="tel"].styler,
input[type="text"].styler,
input[type="url"].styler,
textarea.styler
	padding 8px 9px
	border 1px solid #CCC
	border-bottom-color #B3B3B3
	border-radius 4px
	box-shadow inset 1px 1px #F1F1F1, 0 1px 2px rgba(0,0,0,.1)
	font 14px Arial, sans-serif
	color #333

input[type="search"].styler
	appearance none

textarea
	&.styler
		overflow auto

input[type="email"].styler:hover,
input[type="password"].styler:hover,
input[type="search"].styler:hover,
input[type="tel"].styler:hover,
input[type="text"].styler:hover,
input[type="url"].styler:hover,
textarea.styler:hover
	border-color #B3B3B3
	&:focus
		border-color #CCC
		border-top-color #B3B3B3
		outline none
		box-shadow inset 0 1px 2px rgba(0,0,0,.1)

button.styler,
input[type="button"].styler,
input[type="submit"].styler,
input[type="reset"].styler
	overflow visible
	padding 8px 11px
	border 1px solid #CCC
	border-bottom-color #B3B3B3
	border-radius 4px
	outline none
	background linear-gradient(#FFF, #E6E6E6)
	box-shadow inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,.1)
	font 14px Arial, sans-serif
	color #333
	text-shadow 1px 1px #FFF
	cursor pointer
	&.styler::-moz-focus-inner
		padding 0
		border 0
	&:not([disabled]):hover,
	/input[type="reset"].styler:hover
		background linear-gradient(#F6F6F6, #E6E6E6)
	&:active,
	/input[type="reset"].styler:active
		background #F5F5F5
		box-shadow inset 1px 1px 3px #DDD

button.styler[disabled],
input[type="button"].styler[disabled],
input[type="submit"].styler[disabled]
	border-color #CCC
	background #F5F5F5
	box-shadow none
	color #888