/*
 * ---------------------------------------- *
 * Name: 	Codehouse Stylish Forms			*
 * Version: 2.0.0							*
 * Status:	Release						    *
 * ---------------------------------------- *
 */

/* general & generic */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* input
 ------------------------ */
.stylish-form .stylish-text,
.stylish-form .stylish-number,
.stylish-form .stylish-email,
.stylish-form .stylish-password,
.stylish-form .stylish-textarea { position: relative; }
.stylish-form .stylish-text > input,
.stylish-form .stylish-number > input,
.stylish-form .stylish-email > input,
.stylish-form .stylish-password > input,
.stylish-form .stylish-textarea > textarea { color: #555; background: none; border: none; outline: none; width: 100%; height: 42px; position: absolute; left: 0; top: 0; padding: 0px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.stylish-form .stylish-textarea > textarea { height: 100%; resize: none !important; top: 0; padding: 10px; }
.stylish-form .stylish-text > span,
.stylish-form .stylish-number > span,
.stylish-form .stylish-email > span,
.stylish-form .stylish-password > span,
.stylish-form .stylish-textarea > span { border: 1px solid #ccc; display: block; height: 42px; }
.stylish-form .stylish-textarea > span { height: 100px; }

/* date input
 ------------------------ */
.stylish-form .stylish-text > input.date,
.stylish-form .stylish-number > input.date,
.stylish-form .stylish-text > span.date,
.stylish-form .stylish-number > span.date { width: 60px; margin-right: -2px; left: 0; padding: 0 10px; }

/* dual states
 ------------------------ */
.stylish-form .stylish-ds { display: block; width: 40px; height: 40px; position: relative; float: left; border: 1px solid #ccc; }
.stylish-form .stylish-ds > * { width: 100%; height: 100%; }
.stylish-form .stylish-ds > span { position: absolute; }
.stylish-form .stylish-ds > input[type="checkbox"],
.stylish-form .stylish-ds > input[type="radio"] { cursor: pointer; margin: 0; }

/* checkbox
 ------------------------ */
.stylish-form .stylish-ds[data-type="checkbox"] > span { }
.stylish-form .stylish-ds[data-type="checkbox"] > span.checked { width: 34px; height: 34px; padding: 3px; background: #555; }

/* radio
 ------------------------ */
.stylish-form .stylish-ds[data-type="radio"] { border: none; }
.stylish-form .stylish-ds[data-type="radio"] > span { border-radius: 20px; border: 1px solid #ccc; }
.stylish-form .stylish-ds[data-type="radio"] > span.checked { width: 34px; height: 34px; padding: 3px; background: #555; }

/* select
 ------------------------ */
.stylish-form .stylish-select { border: 1px solid #ccc; position: relative; cursor: pointer; }
.stylish-form .stylish-select > select { display: none; }
.stylish-form .stylish-select > span.selected { display: block; padding: 5px 30px 5px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stylish-form .stylish-select > span > span.ico { position: absolute; top: 21px; right: 21px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #555; }
.stylish-form .stylish-select > ul { display: none; cursor: pointer; position: absolute; top: 106%; left: 0; z-index: 3; background: #fff; border: 1px solid #ccc; list-style: none; padding: 0; margin: 0; width: 100%; overflow: auto; }
.stylish-form .stylish-select > ul.show-above { top: auto; bottom: 100%; }
.stylish-form .stylish-select > ul li { background: #fff; padding: 5px 10px; }
.stylish-form .stylish-select > ul li.disabled { color: #ccc; cursor: default; }
.stylish-form .stylish-select > ul li.group span { display: block; cursor: default; font-weight: bold; font-style: italic; }
.stylish-form .stylish-select > ul li.group ul { list-style: none; }

/* checkbox dropdown
 ------------------------ */
.stylish-form .stylish-select.checkbox-dropdown { }
.stylish-form .stylish-select.checkbox-dropdown .stylish-ds[data-type="checkbox"] { }
.stylish-form .stylish-select.checkbox-dropdown .stylish-ds[data-type="checkbox"] > span { border-color: #222; }
.stylish-form .stylish-select.checkbox-dropdown label { height: 42px; line-height: 42px; margin-bottom: 0; }

/* range slider
-------------------------- */
.stylish-form .ui-slider.ui-slider-horizontal { background: #999; height: 6px; margin-top: 24px; }
.stylish-form .ui-slider-range { background: #fff; height: 6px; }
.stylish-form .ui-slider-handle { background: #fff; height: 27px; width: 10px; margin-top: -5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
.stylish-form .ui-slider-handle:first-of-type { margin-left: 0; }