/* prep */
.fancy input[type=checkbox], .fancy input[type=radio] { display: none; }

/* radios */
.fancy  label > span:first-of-type { display: inline-block; background: #ccc !important; border-radius: 50%; cursor: pointer; background: #eaeaea; width: 18px; height: 18px; margin-right: .35em; position: relative; top: 3px; }
.fancy label:hover > span:first-of-type { background: #aaa !important; }
.fancy input:checked + label > span:first-of-type { background: #88bbaa !important; }

/* checkboxes */
.fancy input[type=checkbox] { display: none; }
.fancy input[type=checkbox] + label::before { background: #fff; border: solid 1px #aaa; border-radius: 4px; content: '\2713'; color: transparent; line-height: 0; padding: 0 .2em; margin-right: .35em; position: relative; top: .1em; font-size: 1.15em; font-weight: 700; }
.fancy input[type=checkbox]:checked + label::before { color: #88bbaa; }
.fancy input[type=checkbox] + label:hover::before { border-color: #aaa; }

/* ---
| RANGERS (SLIDERS)
--- */

/* removing default styles */
input[type=range] { -webkit-appearance: none; margin: 18px 0; width: 100%; margin: 0; padding: 0; border: none; background: none; }
input[type=range]:focus { outline: none; }
input[type=range]:disabled { opacity: .4; }

/* track styling for WebKit/Blink */
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 7px;
	background: #555;
	border-radius: 8px;
}

/* thumb styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
	background: #88bbaa;
	border: solid 2px #e5e5e5;
	height: 23px;
	width: 23px;
	border-radius: 50%;
	-webkit-appearance: none;
	margin-top: -9px;
}

/* on/off states for WebKit/Blink */
.on-off[value="0"]::-webkit-slider-thumb { background: #c45; }
.on-off[value="1"]::-webkit-slider-thumb { background: #53d58b; }

/* track styling for Firefox */
input[type=range]::-moz-range-track { 
	width: 100%;
	height: 7px;
	background: #555;
	border-radius: 8px;
}

/* thumb styling for Firefox */
input[type=range]::-moz-range-thumb {
	background: #88bbaa;
	border: solid 2px #e5e5e5;
	height: 23px;
	width: 23px;
	border-radius: 50%;
}

/* on/off states for Firefox */
.on-off[value="0"]::-moz-range-thumb { background: #c45; }
.on-off[value="1"]::-moz-range-thumb { background: #53d58b; }

/* track styling for IE */
input[type=range]::-ms-track {
	width: 100%;
	height: 7px;
	background: transparent;
	border-radius: 8px;
	border-color: transparent;
	color: transparent;
	/*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 10px 0;
}
input[type=range]::-ms-fill-lower {
    background: #555;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #555;
    border-radius: 10px;
}

/* thumb styling for IE */
input[type=range]::-ms-thumb {
	background: #88bbaa;
	border: solid 2px #e5e5e5;
	height: 23px;
	width: 23px;
	border-radius: 50%;
}

/* on/off states for IE */
.on-off[value="0"]::-ms-thumb { background: #c45; }
.on-off[value="1"]::-ms-thumb { background: #53d58b; }

/* tooltip for IE */
input[type=range]::-ms-tooltip { display: none; }

/* ---
| FILE UPLOADS - via select or drag-and-drop
--- */

/* drop/select zone */
[data-upload-zone] { border: dashed 3px #bbb; padding: .65em 1em; text-align: center; position: relative; background: {maths-soft-colour}; }
.dragover { background: #88bbaa; }
[data-upload-zone]:not([data-allow-multiple])::before { content: 'Drag and drop file here or click to select'; color: {maths-darker-colour}; }
[data-upload-zone][data-allow-multiple]::after { content: 'Drag and drop files here or click to select'; color: {maths-darker-colour}; }
[data-upload-zone][data-filename]::after { content: attr(data-filename); }
[data-upload-zone] input[type=file] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; }

/* preview zone */
[data-upload-preview] { text-align: center; height: 150px; }
[data-upload-preview]:not(:empty)::before { content: 'PREVIEW'; display: block; font-size: .93em; margin: .65em 0 .3em 0; color: #888; }
[data-upload-preview] li { display: inline-block; margin: .5em 1em; border: solid 1px #ddd; height: 100%; background: #ddd; position: relative; }
[data-upload-preview] li a { border-radius: 50%; background: {my-videos-colour}; position: absolute; top: -.65em; right: -.65em; padding: 0 .5em .15em .5em; color: #fff !important; cursor: pointer; }
[data-upload-preview] li a:hover { background: {my-videos-darker-colour}; text-decoration: none; }
[data-upload-preview] img { height: 100%; display: block; margin: 0 auto; width: auto; }