label {
	display: block;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]), 
textarea,
select {
	width: 100%;
	height: 3.2rem;
	margin: .4rem 0;
	border: 2px solid;
	padding: .4rem .8rem;
}

button,
input[type="button"], input[type="submit"], input[type="reset"],
.button:link, .button:visited {

	min-width: 10rem;
	max-width: 100%;
	border: 2px solid transparent;
	padding: .4rem 1.2rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #000;
	
	/* needed for .button as doesn’t always get default control behaviours */
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
}

button[disabled], button.disabled,
input[type="button"][disabled], input[type="button"].disabled,
input[type="submit"][disabled], input[type="submit"].disabled,
input[type="reset"][disabled], input[type="reset"].disabled,
select[disabled], select.disabled, 
.button[disabled], .button.disabled,
fieldset[disabled] button,
fieldset[disabled] input[type="button"],
fieldset[disabled] input[type="submit"], 
fieldset[disabled] input[type="reset"],
fieldset[disabled] select,
fieldset[disabled] .button {
	cursor: not-allowed;
	pointer-events: none;
	outline: none;
}

/* This style for a primary button on the entire page, for added visual emphasis */
button.button--page-primary,
input[type="button"].button--page-primary, input[type="submit"].button--page-primary, input[type="reset"].button--page-primary,
.button.button--page-primary {
	padding: 1.2rem;
	font-weight: 300;
	font-size: 2rem;
	line-height: 1;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	
	padding-right: 2.4rem;
	
	border-radius: 0;
	background: #fff url("../images/select-arrow.svg") no-repeat right 6px center;
	background-size: 1.3rem .8rem;
	
	/* Extra styles needed to hide default FF arrow */
    text-indent: .01px;
	
    text-overflow: ellipsis;
	overflow: hidden;
	
}

/* IE doesn't support -webkit-appearance, but this works in IE10+ */
select::-ms-expand{
  display: none;
}

select:focus {
	outline: 0;
}

input[type="radio"],
input[type="checkbox"] {
	width: 2.0rem;
	height: 2.0rem;
	
	vertical-align: middle;
}

input[type="checkbox"]::-ms-check,
input[type="radio"]::-ms-check {
	border-width: 2px;
}

input[type="range"] {
	width: 100%;
	height: 4.2rem;
	
	border: none;
	padding: 1.6rem 0;
}

input[type="range"]::-ms-track {
	height: .2rem;
	border: none;
	
	color: transparent; /* Remove ticks */
}

input[type="range"]::-ms-thumb {
	width: 2.4rem;
	height: .8rem;
	
	border: none;
	border-radius: .4rem;
}

progress {
	display: block;
	
	width: 100%;
	height: .4rem;
	
	border: none; /* needed for Firefox */
}

progress::-ms-fill {
	border: none; /* remove border from progress bar itself */
}