﻿/* FORM */
label {
    font-size: 0.95em;
    margin-bottom: 3px;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

.control-label {
    font-weight: 400 !important;
}

.form-control {
	-webkit-border-radius: 0px !important;
	-moz-border-radius: 0px !important;
	border-radius: 0px !important;
	box-shadow: none;
	font-size: 1em;
}

.form-control:focus {
	box-shadow: none;
    border-color: #2d445c;
}

/* INPUT GROUP */
.input-group .input-group-addon {
	border-radius: 0;
	background-color: #f4f4f4;
}

/* CHECKBOX & RADIO */
.checkbox,
.radio {
	padding-left: 20px;
}

.radio label, .checkbox label,
.radio-inline, .checkbox-inline {
	padding-left: 0;
}

.form-horizontal .radio, 
.form-horizontal .checkbox, 
.form-horizontal .radio-inline, 
.form-horizontal .checkbox-inline {
    padding-left: 20px;
}

.form-horizontal .radio-inline, 
.form-horizontal .checkbox-inline {
    padding-right: 25px;
}

.form-horizontal input[type=checkbox] {
    margin-top: 5px;
}


/* SLIDER */
.slider-handle {
	opacity: 1;
	background-color: #ffffff;
	background-image: linear-gradient(to bottom, #ffffff, #f9f9f9);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f9f9f9));
	background-image: -webkit-linear-gradient(top, #ffffff, #f9f9f9);
	background-image: -moz-linear-gradient(top, #ffffff, #f9f9f9);
	background-image: -o-linear-gradient(top, #ffffff, #f9f9f9);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.39);
	height: 23px;
	width: 23px;
	transition: box-shadow 200ms ease-in-out;
}

.slider-handle:hover {
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}

.slider.slider-horizontal {
	margin-top: 10px;
}

.slider.slider-horizontal .slider-handle {
	margin-top: -7px;
}

.slider.slider-vertical {
	margin-right: 13px;
	float: left;
}

.slider.slider-vertical .slider-handle {
	margin-left: -6px;
}

/* FORM VALIDATION */
input.error,
input.error:focus {
	border: 1px solid #d9534f;
}

.error {
	color: #d9534f;
}

/* http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */

input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;
    
    /*required for proper track sizing in FF*/
    width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #2d445c;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #2d445c;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    width: 300px;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #2d445c;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}