.form-wrapper { display: table; margin: 0 auto; text-align: left !important; width: 30em; } .form-row { display: table-row; } .form-label { width: 1%; white-space: pre; } .form-label, .form-input { display: table-cell; line-height: 37px; vertical-align: text-bottom; } .form-input { overflow: hidden; text-overflow: ellipsis; } .form-row label { padding-right: 1em; text-align: right; } .tag-input, textarea, input[type=text], input[type=password] { padding: 3px 6px 4px 6px; border: 1px solid #eee; box-shadow: 0 1px 2px -1px #e0e0e0 inset; background: #fafafa; font-family: 'Inconsolata', monospace; font-size: 17px; text-overflow: ellipsis; width: 100%; box-sizing: border-box; } /* remove chrome yellow background for inputs with autocompletion */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fafafa inset; } button, input[type=button] { padding: 2px 15px 3px 15px; border: 1px solid #ccc; box-shadow: 0 1px 1px 0 #e5e5e5; background: linear-gradient(#f5f5f5, #e5e5e5); color: #444; text-shadow: 0 1px 1px #fafafa; font-family: 'Droid Sans', sans-serif; font-size: 17px; } button:not(:disabled), input[type=button]:not(:disabled) { cursor: pointer; } button:not(:disabled):hover, input[type=button]:not(:disabled):hover { background: linear-gradient(#fafafa, #eaeaea); } button:disabled { color: gray; } button.highlight, input[type=button].highlight { background: linear-gradient(#74D2FD, #64C2ED); text-shadow: 0 1px 1px #8ff; } button:not(:disabled):hover.highlight, input[type=button]:not(:disabled):hover.highlight { background: linear-gradient(#84E2FF, #74D2FD); } button:focus, textarea:focus, input:focus { outline: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; } .tag-input.focused, button:focus, textarea:focus, input:not(.tag-real-input):focus { box-shadow: 0 0 0 1px #64C2ED inset; border-color: #64C2ED; } input[type=radio], input[type=checkbox] { display:none; } input[type=radio] + label, input[type=checkbox] + label { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } input[type=radio] + label:before, input[type=checkbox] + label:before { font-family: 'FontAwesome'; display: inline-block; width: 1em; text-align: left; } input[type=radio] + label:before { content: "\f1db"; } input[type=radio]:checked + label:before { content: "\f192"; } input[type=checkbox] + label:before { content: "\f096"; } input[type=checkbox]:checked + label:before { content: "\f046"; } .file-handler { border: 3px dashed #eee; padding: 0.3em 0.5em; line-height: 140% !important; text-align: center; cursor: pointer; } .file-handler.active { border-color: #6a2; background-color: #eeffcc; } .tag-input { padding: 1px; line-height: normal !important; cursor: text; } .tag-input ul { list-style-type: none; display: inline; margin: 0; padding: 0; } .tag-input li { background: #ddd; display: inline-block; font-family: 'Droid Sans', sans-serif; margin: 1px; padding: 2px 4px; font-size: 15px; } .tag-input input { border: none; width: auto; } .tag-input li a { color: black; font-size: 14px; margin-left: 0.5em; cursor: pointer; } .autocomplete { position: absolute; display: none; z-index: 10; } .autocomplete ul { list-style-type: none; padding: 0 0 !important; margin: 0 !important; border: 2px solid #64C2ED; background: white; display: block !important; text-align: left; } .autocomplete li { margin: 0; padding: 0.1em 0.5em !important; } .autocomplete li.active { background: #64C2ED; }