/* Colours */

body {
  color: #414143;
}

a,
a:visited {
	color: #0078D7; /* Blue highlight colour */
}

a:hover {
	color: #666;
}

a:active {
	color: #999;
}

/* Current and disabled links */
.link--current,
.link--current a {
	color: #767676;
}

.link--disabled,
.link--disabled a {
	color: #414143;
	pointer-events: none;
	cursor: default;
}

.section-header .subtitle {
    color: #767676;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]),
textarea,
select {
	border-color: hsla(0, 0%, 0%, .4);
	background-color: hsla(0, 0%, 100%, .4);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):hover, textarea:hover,
select:hover {
    border-color: hsla(0, 0%, 0%, .6); 
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):focus, textarea:focus {
    border-color: #0078D7;
    background-color: #fff;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"])[disabled],
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"])[readonly],
fieldset[disabled] input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]),
textarea[disabled], textarea[readonly], fieldset[disabled] textarea {
	border-color: transparent;
	background-color: hsla(0, 0%, 0%, .2);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):invalid,
textarea:invalid {
	border-color: #E81123;
}

button,
input[type="button"], input[type="submit"], input[type="reset"],
.button {
	background-color: hsla(0, 0%, 0%, .2);
}

.button,
.button:hover,
.button:active {
	color: #000; /* needed if .button is on an a element */
}

button:hover, button:focus,
input[type="button"]:hover, input[type="button"]:focus,
input[type="submit"]:hover, input[type="submit"]:focus,
input[type="reset"]:hover, input[type="reset"]:focus,
.button:hover, .button:focus {
    border-color: hsla(0, 0%, 0%, .4);
}

button:active,
input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active,
.button:active,
button.button--primary:active,
input[type="button"].button--primary:active, input[type="submit"].button--primary:active, input[type="reset"].button--primary:active,
.button.button--primary:active {
	background-color: hsla(0, 0%, 0%, .4);
	border-color: transparent;
}

button.button--primary,
input[type="button"].button--primary, input[type="submit"].button--primary, input[type="reset"].button--primary,
.button.button--primary {
	background-color: #0078D7;
	color: #fff;
}

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 {
	color: hsla(0, 0%, 0%, .2);
	background-color: hsla(0, 0%, 0%, .2);
}

select[disabled], select.disabled,
fieldset[disabled] select {
	border-color: hsla(0, 0%, 0%, .2);
    color:  hsla(0, 0%, 0%, .6);
}

select:focus,
select option:focus,
select option:checked {
    background-color: #3a96dd;
}

select:active {
   background-color: #fff;
}

select option:active {
	background-color: #767676;
	color: #000;
}

input[type="checkbox"]::-ms-check,
input[type="radio"]::-ms-check {
	background-color: transparent;
 	border-color: hsla(0, 0%, 0%, .8);
}

input[type="checkbox"]:hover::-ms-check,
input[type="radio"]:hover::-ms-check {
    border-color: #000;
}

input[type="checkbox"]:checked::-ms-check,
input[type="radio"]:checked::-ms-check {
	border-color: #0078D7;
}

input[type="checkbox"]:checked::-ms-check {
	background-color: #0078D7;
	color: #fff;
}

input[type="checkbox"]:active::-ms-check {
	background-color: hsla(0, 0%, 0%, .6);
	border-color: transparent;
	color: #000;
}
 
input[type="radio"]:active::-ms-check,
input[type="radio"]:active:checked::-ms-check {
    color: hsla(0, 0%, 0%, .6);
    border-color: currentColor;
}

input[type="checkbox"][disabled]::-ms-check,
input[type="radio"][disabled]::-ms-check,
fieldset[disabled] input[type="checkbox"]::-ms-check,
fieldset[disabled] input[type="radio"]::-ms-check {
	color: hsla(0, 0%, 0%, .2);
	background-color: transparent;
    border-color: currentColor;
}

/* needed so active styles don’t override disabled styles */
input[type="radio"][disabled]:checked::-ms-check, 
fieldset[disabled] input[type="radio"]:checked::-ms-check {
   color: hsla(0, 0%, 0%, .2); 
}

input[type="range"]::-ms-fill-lower {
    background-color: #0078d7;
}

input[type="range"]::-ms-fill-upper {
	background-color: hsla(0, 0%, 0%, .4);
}

input[type="range"]::-ms-thumb {
	background-color: #0078d7;
}

input[type="range"]:hover::-ms-thumb {
	background-color: #1f1f1f;
}

input[type="range"]:active::-ms-thumb {
	background-color: #ccc;
}

input[type="range"]:disabled::-ms-fill-lower,
input[type="range"]:disabled::-ms-fill-upper {
	background-color: hsla(0, 0%, 0%, .2);
}

input[type="range"]:disabled::-ms-thumb {
	background-color: #ccc;
}

progress {
	color: #0078D7; /* colours progress bar in IE */
	background-color: #ccc;	/* colours progress background in IE and Firefox */
}

progress::-webkit-progress-value {
	background-color: #0078D7; /* progress bar colour */
}

progress::-webkit-progress-bar {
    background-color: #cccccc; /* progess background colour */
}

progress::-moz-progress-bar {
    background-color: #0078D7; /* progress bar colour (not bg like WebKit) */
}

.modal-dialog {
   background-color: #fff;
}

.modal[aria-hidden="false"] {
	background-color: hsla(0, 0%, 0%, .5);
}

pre, .code-block {
	background: hsla(0, 0%, 0%, .03);
	border: 2px solid hsla(0, 0%, 0%, .03);
}

.rendered-result {
	border: 2px solid hsla(0, 0%, 0%, .06);
}

/* Alerts */
.alert--error {
	color: #E81123;
}