form { margin: auto; max-width: 800px; } .form-group { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 8% 0; } /* Sizing */ form label { font-size: 1.2em; margin-right: 3%; } /* Input formatting */ form input, form textarea, form select { color: #eee; background-color: #202020; background-color: rgba(255,255,255,0.1); padding: 1% 1.5%; border-radius: .3vw; } form input:not(:disabled), form textarea:not(:disabled), form .input-addon { border: 1px solid #666; -moz-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5); -webkit-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5); box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5); } form input:disabled:not(.input-addon), form textarea:disabled, form select:disabled { border: 1px solid #444; } form input:not(.input-addon):not(.input-with-addon):not([type="radio"]):not([type="checkbox"]), form .input-with-addon-group { min-width: 50%; } form input:active:not(.input-addon), form textarea:active, form select:active, form input:focus:not(.input-addon), form textarea:focus, form select:focus { outline: none; border: 1px solid #fbc93d; } form .input-with-addon-group { display: flex; } form .input-addon, form .input-with-addon { -moz-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5); -webkit-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5); box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5); } form .input-addon { text-align: center; width: auto; } form .input-with-addon { flex-grow: 1; } form .input-addon.left { padding: 1% 0 1% 1.5%; border-right-color: #202020; border-right-color: rgba(102,102,102,0); border-top-right-radius: 0; border-bottom-right-radius: 0; } form .input-with-addon.left { padding: 1% 1.5% 1% 0; border-left-color: #202020; border-left-color: rgba(102,102,102,0); border-top-left-radius: 0; border-bottom-left-radius: 0; } form .input-addon.right { padding: 1% 1.5% 1% 0; border-left-color: #202020; border-left-color: rgba(102,102,102,0); border-top-left-radius: 0; border-bottom-left-radius: 0; } form .input-with-addon.right { padding: 1% 0 1% 1.5%; border-right-color: #202020; border-right-color: rgba(102,102,102,0); border-top-right-radius: 0; border-bottom-right-radius: 0; } ::-webkit-input-placeholder { color: #666; }:-moz-placeholder { color: #666; opacity: 1; }::-moz-placeholder { color: #666; opacity: 1; }:-ms-input-placeholder { color: #666; } form select:not(:disabled) { -moz-box-shadow: inset 0.11vw 0.18vw 0.52vw rgba(255,255,255,.2), inset -0.11vw -0.18vw 0.52vw rgba(0,0,0,.4), 0.1vw 0.1vw 0.36vw #000; -webkit-box-shadow: inset 0.11vw 0.18vw 0.52vw rgba(255,255,255,.2), inset -0.11vw -0.18vw 0.52vw rgba(0,0,0,.4), 0.1vw 0.1vw 0.36vw #000; box-shadow: inset 0.11vw 0.18vw 0.52vw rgba(255,255,255,.2), inset -0.11vw -0.18vw 0.52vw rgba(0,0,0,.4), 0.1vw 0.1vw 0.36vw #000; } form select > option { background: #222; color: inherit; } form .radio { min-width: 150px; display: flex; justify-content: space-between; } form input[type="checkbox"], form input[type="radio"] { width: auto; margin: 8px; } form input[type="checkbox"]:active, form input[type="radio"]:active, form input[type="checkbox"]:focus, form input[type="radio"]:focus { outline: 1px solid #fbc93d; } form .btn { font-size: 1.5em; } /* Help */ .help { display: none; width: 100%; margin-top: 2%; margin-bottom: 0; text-align: right; }