/*! * # Fomantic-UI - Form * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Elements *******************************/ /*-------------------- Form ---------------------*/ .ui.form { position: relative; max-width: 100%; } /*-------------------- Content ---------------------*/ .ui.form > p { margin: 1em 0; } /*-------------------- Field ---------------------*/ .ui.form .field { clear: both; margin: 0 0 1em; } .ui.form .field:last-child, .ui.form .fields:last-child .field { margin-bottom: 0; } .ui.form .fields .field { clear: both; margin: 0; } /*-------------------- Labels ---------------------*/ .ui.form .field > label { display: block; margin: 0 0 0.28571429rem 0; color: #AAAAAA; font-size: 0.92857143em; font-weight: bold; text-transform: none; } /*-------------------- Standard Inputs ---------------------*/ .ui.form textarea, .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] { width: 100%; vertical-align: top; } /* Set max height on unusual input */ .ui.form ::-webkit-datetime-edit, .ui.form ::-webkit-inner-spin-button { height: 1.21428571em; } .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; margin: 0; outline: none; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); line-height: 1.21428571em; padding: 0.67857143em 1em; font-size: 1em; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); color: #AAAAAA; border-radius: 0.28571429rem; -webkit-box-shadow: 0 0 0 0 transparent inset; box-shadow: 0 0 0 0 transparent inset; -webkit-transition: color 0.1s ease, border-color 0.1s ease; transition: color 0.1s ease, border-color 0.1s ease; } /* Text Area */ .ui.input textarea, .ui.form textarea { margin: 0; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); padding: 0.78571429em 1em; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); outline: none; color: #AAAAAA; border-radius: 0.28571429rem; -webkit-box-shadow: 0 0 0 0 transparent inset; box-shadow: 0 0 0 0 transparent inset; -webkit-transition: color 0.1s ease, border-color 0.1s ease; transition: color 0.1s ease, border-color 0.1s ease; font-size: 1em; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; line-height: 1.2857; resize: vertical; } .ui.form textarea:not([rows]) { height: 12em; min-height: 8em; max-height: 24em; } .ui.form textarea, .ui.form input[type="checkbox"] { vertical-align: top; } /*-------------------- Checkbox margin ---------------------*/ .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox { margin-top: 0.7em; } .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox { margin-top: 2.41428571em; } .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox { margin-top: 2.21428571em; } .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox { margin-top: 2.61428571em; } .ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox { margin-top: 0.6em; } .ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox { margin-top: 0.5em; } .ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox { margin-top: 0.7em; } /*-------------------- Transparent ---------------------*/ .ui.form .field .transparent.input:not(.icon) input, .ui.form .field input.transparent, .ui.form .field textarea.transparent { padding: 0.67857143em 1em; } .ui.form .field input.transparent, .ui.form .field textarea.transparent { border-color: transparent !important; background-color: transparent !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .ui.form .field.error .transparent.input input, .ui.form .field.error .transparent.input textarea, .ui.form .field.error input.transparent, .ui.form .field.error textarea.transparent { background-color: #FFF6F6 !important; color: #9F3A38 !important; } /*-------------------------- Input w/ attached Button ---------------------------*/ .ui.form input.attached { width: auto; } /*-------------------- Basic Select ---------------------*/ .ui.form select { display: block; height: auto; width: 100%; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; -webkit-box-shadow: 0 0 0 0 transparent inset; box-shadow: 0 0 0 0 transparent inset; padding: 0.62em 1em; color: #AAAAAA; -webkit-transition: color 0.1s ease, border-color 0.1s ease; transition: color 0.1s ease, border-color 0.1s ease; } /*-------------------- Dropdown ---------------------*/ /* Block */ .ui.form .field > .selection.dropdown { min-width: auto; width: 100%; } .ui.form .field > .selection.dropdown > .dropdown.icon { float: right; } /* Inline */ .ui.form .inline.fields .field > .selection.dropdown, .ui.form .inline.field > .selection.dropdown { width: auto; } .ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon, .ui.form .inline.field > .selection.dropdown > .dropdown.icon { float: none; } /*-------------------- UI Input ---------------------*/ /* Block */ .ui.form .field .ui.input, .ui.form .fields .field .ui.input, .ui.form .wide.field .ui.input { width: 100%; } /* Inline */ .ui.form .inline.fields .field:not(.wide) .ui.input, .ui.form .inline.field:not(.wide) .ui.input { width: auto; vertical-align: middle; } /* Auto Input */ .ui.form .fields .field .ui.input input, .ui.form .field .ui.input input { width: auto; } /* Full Width Input */ .ui.form .ten.fields .ui.input input, .ui.form .nine.fields .ui.input input, .ui.form .eight.fields .ui.input input, .ui.form .seven.fields .ui.input input, .ui.form .six.fields .ui.input input, .ui.form .five.fields .ui.input input, .ui.form .four.fields .ui.input input, .ui.form .three.fields .ui.input input, .ui.form .two.fields .ui.input input, .ui.form .wide.field .ui.input input { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; width: 0; } /*-------------------- Types of Messages ---------------------*/ .ui.form .success.message, .ui.form .warning.message, .ui.form .error.message, .ui.form .error.message:empty { display: none; } /* Assumptions */ .ui.form .message:first-child { margin-top: 0; } /*-------------------- Validation Prompt ---------------------*/ .ui.form .field .prompt.label { white-space: normal; background: #FFFFFF !important; border: 1px solid #E0B4B4 !important; color: #9F3A38 !important; } .ui.form .inline.fields .field .prompt, .ui.form .inline.field .prompt { vertical-align: top; margin: -0.25em 0 -0.5em 0.5em; } .ui.form .inline.fields .field .prompt:before, .ui.form .inline.field .prompt:before { border-width: 0 0 1px 1px; bottom: auto; right: auto; top: 50%; left: 0; } /******************************* States *******************************/ /*-------------------- Autofilled ---------------------*/ .ui.form .field.field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px #FFFFF0 inset !important; box-shadow: 0 0 0 100px #FFFFF0 inset !important; border-color: #E5DFA1 !important; } /* Focus */ .ui.form .field.field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px #FFFFF0 inset !important; box-shadow: 0 0 0 100px #FFFFF0 inset !important; border-color: #D5C315 !important; } /* Error */ .ui.form .error.error input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px #FFFAF0 inset !important; box-shadow: 0 0 0 100px #FFFAF0 inset !important; border-color: #E0B4B4 !important; } /*-------------------- Placeholder ---------------------*/ /* browsers require these rules separate */ .ui.form ::-webkit-input-placeholder { color: #ffffff; } .ui.form :-ms-input-placeholder { color: #ffffff !important; } .ui.form ::-moz-placeholder { color: #ffffff; } .ui.form :focus::-webkit-input-placeholder { color: #ffffff; } .ui.form :focus:-ms-input-placeholder { color: #ffffff !important; } .ui.form :focus::-moz-placeholder { color: #ffffff; } /* Error Placeholder */ .ui.form .error ::-webkit-input-placeholder { color: #e7bdbc; } .ui.form .error :-ms-input-placeholder { color: #e7bdbc !important; } .ui.form .error ::-moz-placeholder { color: #e7bdbc; } .ui.form .error :focus::-webkit-input-placeholder { color: #da9796; } .ui.form .error :focus:-ms-input-placeholder { color: #da9796 !important; } .ui.form .error :focus::-moz-placeholder { color: #da9796; } /*-------------------- Focus ---------------------*/ .ui.form input:not([type]):focus, .ui.form input[type="date"]:focus, .ui.form input[type="datetime-local"]:focus, .ui.form input[type="email"]:focus, .ui.form input[type="number"]:focus, .ui.form input[type="password"]:focus, .ui.form input[type="search"]:focus, .ui.form input[type="tel"]:focus, .ui.form input[type="time"]:focus, .ui.form input[type="text"]:focus, .ui.form input[type="file"]:focus, .ui.form input[type="url"]:focus { color: rgba(0, 0, 0, 0.95); border-color: #85B7D9; border-radius: 0.28571429rem; background: #FFFFFF; -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; } .ui.form textarea:focus { color: rgba(0, 0, 0, 0.95); border-color: #85B7D9; border-radius: 0.28571429rem; background: #FFFFFF; -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; -webkit-appearance: none; } /*-------------------- Success ---------------------*/ /* On Form */ .ui.form.success .success.message:not(:empty) { display: block; } .ui.form.success .compact.success.message:not(:empty) { display: inline-block; } .ui.form.success .icon.success.message:not(:empty) { display: -webkit-box; display: -ms-flexbox; display: flex; } /*-------------------- Warning ---------------------*/ /* On Form */ .ui.form.warning .warning.message:not(:empty) { display: block; } .ui.form.warning .compact.warning.message:not(:empty) { display: inline-block; } .ui.form.warning .icon.warning.message:not(:empty) { display: -webkit-box; display: -ms-flexbox; display: flex; } /*-------------------- Error ---------------------*/ /* On Form */ .ui.form.error .error.message:not(:empty) { display: block; } .ui.form.error .compact.error.message:not(:empty) { display: inline-block; } .ui.form.error .icon.error.message:not(:empty) { display: -webkit-box; display: -ms-flexbox; display: flex; } /* On Field(s) */ .ui.ui.form .fields.error .field label, .ui.ui.form .field.error label, .ui.ui.form .fields.error .field .input, .ui.ui.form .field.error .input { color: #9F3A38; } .ui.form .fields.error .field .corner.label, .ui.form .field.error .corner.label { border-color: #9F3A38; color: #FFFFFF; } .ui.form .fields.error .field textarea, .ui.form .fields.error .field select, .ui.form .fields.error .field input:not([type]), .ui.form .fields.error .field input[type="date"], .ui.form .fields.error .field input[type="datetime-local"], .ui.form .fields.error .field input[type="email"], .ui.form .fields.error .field input[type="number"], .ui.form .fields.error .field input[type="password"], .ui.form .fields.error .field input[type="search"], .ui.form .fields.error .field input[type="tel"], .ui.form .fields.error .field input[type="time"], .ui.form .fields.error .field input[type="text"], .ui.form .fields.error .field input[type="file"], .ui.form .fields.error .field input[type="url"], .ui.form .field.error textarea, .ui.form .field.error select, .ui.form .field.error input:not([type]), .ui.form .field.error input[type="date"], .ui.form .field.error input[type="datetime-local"], .ui.form .field.error input[type="email"], .ui.form .field.error input[type="number"], .ui.form .field.error input[type="password"], .ui.form .field.error input[type="search"], .ui.form .field.error input[type="tel"], .ui.form .field.error input[type="time"], .ui.form .field.error input[type="text"], .ui.form .field.error input[type="file"], .ui.form .field.error input[type="url"] { background: #FFF6F6; border-color: #E0B4B4; color: #9F3A38; border-radius: ''; -webkit-box-shadow: none; box-shadow: none; } .ui.form .field.error textarea:focus, .ui.form .field.error select:focus, .ui.form .field.error input:not([type]):focus, .ui.form .field.error input[type="date"]:focus, .ui.form .field.error input[type="datetime-local"]:focus, .ui.form .field.error input[type="email"]:focus, .ui.form .field.error input[type="number"]:focus, .ui.form .field.error input[type="password"]:focus, .ui.form .field.error input[type="search"]:focus, .ui.form .field.error input[type="tel"]:focus, .ui.form .field.error input[type="time"]:focus, .ui.form .field.error input[type="text"]:focus, .ui.form .field.error input[type="file"]:focus, .ui.form .field.error input[type="url"]:focus { background: #FFF6F6; border-color: #E0B4B4; color: #9F3A38; -webkit-box-shadow: none; box-shadow: none; } /* Preserve Native Select Stylings */ .ui.form .field.error select { -webkit-appearance: menulist-button; } /*------------------ Dropdown Error --------------------*/ .ui.form .fields.error .field .ui.dropdown, .ui.form .fields.error .field .ui.dropdown .item, .ui.form .field.error .ui.dropdown, .ui.form .field.error .ui.dropdown .text, .ui.form .field.error .ui.dropdown .item { background: #FFF6F6; color: #9F3A38; } .ui.form .fields.error .field .ui.dropdown, .ui.form .field.error .ui.dropdown { border-color: #E0B4B4 !important; } .ui.form .fields.error .field .ui.dropdown:hover, .ui.form .field.error .ui.dropdown:hover { border-color: #E0B4B4 !important; } .ui.form .fields.error .field .ui.dropdown:hover .menu, .ui.form .field.error .ui.dropdown:hover .menu { border-color: #E0B4B4; } .ui.form .fields.error .field .ui.multiple.selection.dropdown > .label, .ui.form .field.error .ui.multiple.selection.dropdown > .label { background-color: #EACBCB; color: #9F3A38; } /* Hover */ .ui.form .fields.error .field .ui.dropdown .menu .item:hover, .ui.form .field.error .ui.dropdown .menu .item:hover { background-color: #FBE7E7; } /* Selected */ .ui.form .fields.error .field .ui.dropdown .menu .selected.item, .ui.form .field.error .ui.dropdown .menu .selected.item { background-color: #FBE7E7; } /* Active */ .ui.form .fields.error .field .ui.dropdown .menu .active.item, .ui.form .field.error .ui.dropdown .menu .active.item { background-color: #FDCFCF !important; } /*-------------------- Checkbox Error ---------------------*/ .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label, .ui.form .field.error .checkbox:not(.toggle):not(.slider) label, .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box, .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box { color: #9F3A38; } .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before, .ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before, .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before, .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before { background: #FFF6F6; border-color: #E0B4B4; } .ui.form .fields.error .field .checkbox label:after, .ui.form .field.error .checkbox label:after, .ui.form .fields.error .field .checkbox .box:after, .ui.form .field.error .checkbox .box:after { color: #9F3A38; } /*-------------------- Disabled ---------------------*/ .ui.form .disabled.fields .field, .ui.form .disabled.field, .ui.form .field :disabled { pointer-events: none; opacity: 0.45; } .ui.form .field.disabled > label, .ui.form .fields.disabled > label { opacity: 0.45; } .ui.form .field.disabled :disabled { opacity: 1; } /*-------------- Loading ---------------*/ .ui.loading.form { position: relative; cursor: default; pointer-events: none; } .ui.loading.form:before { position: absolute; content: ''; top: 0; left: 0; background: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; z-index: 100; } .ui.loading.form.segments:before { border-radius: 0.28571429rem; } .ui.loading.form:after { position: absolute; content: ''; top: 50%; left: 50%; margin: -1.5em 0 0 -1.5em; width: 3em; height: 3em; -webkit-animation: loader 0.6s infinite linear; animation: loader 0.6s infinite linear; border: 0.2em solid #767676; border-radius: 500rem; -webkit-box-shadow: 0 0 0 1px transparent; box-shadow: 0 0 0 1px transparent; visibility: visible; z-index: 101; } /******************************* Element Types *******************************/ /*-------------------- Required Field ---------------------*/ .ui.form .required.fields:not(.grouped) > .field > label:after, .ui.form .required.fields.grouped > label:after, .ui.form .required.field > label:after, .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, .ui.form .required.field > .checkbox:after, .ui.form label.required:after { margin: -0.2em 0 0 0.2em; content: '*'; color: #DB2828; } .ui.form .required.fields:not(.grouped) > .field > label:after, .ui.form .required.fields.grouped > label:after, .ui.form .required.field > label:after, .ui.form label.required:after { display: inline-block; vertical-align: top; } .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, .ui.form .required.field > .checkbox:after { position: absolute; top: 0; left: 100%; } /******************************* Variations *******************************/ /*-------------------- Inverted Colors ---------------------*/ .ui.inverted.form label, .ui.form .inverted.segment label, .ui.form .inverted.segment .ui.checkbox label, .ui.form .inverted.segment .ui.checkbox .box, .ui.inverted.form .ui.checkbox label, .ui.inverted.form .ui.checkbox .box, .ui.inverted.form .inline.fields > label, .ui.inverted.form .inline.fields .field > label, .ui.inverted.form .inline.fields .field > p, .ui.inverted.form .inline.field > label, .ui.inverted.form .inline.field > p { color: rgba(255, 255, 255, 0.9); } .ui.inverted.loading.form { color: #FFFFFF; } .ui.inverted.loading.form:before { background: rgba(0, 0, 0, 0.85); } /* Inverted Field */ .ui.inverted.form input:not([type]), .ui.inverted.form input[type="date"], .ui.inverted.form input[type="datetime-local"], .ui.inverted.form input[type="email"], .ui.inverted.form input[type="number"], .ui.inverted.form input[type="password"], .ui.inverted.form input[type="search"], .ui.inverted.form input[type="tel"], .ui.inverted.form input[type="time"], .ui.inverted.form input[type="text"], .ui.inverted.form input[type="file"], .ui.inverted.form input[type="url"] { background: #FFFFFF; border-color: rgba(255, 255, 255, 0.1); color: #AAAAAA; -webkit-box-shadow: none; box-shadow: none; } /*-------------------- Field Groups ---------------------*/ /* Grouped Vertically */ .ui.form .grouped.fields { display: block; margin: 0 0 1em; } .ui.form .grouped.fields:last-child { margin-bottom: 0; } .ui.form .grouped.fields > label { margin: 0 0 0.28571429rem 0; color: #AAAAAA; font-size: 0.92857143em; font-weight: bold; text-transform: none; } .ui.form .grouped.fields .field, .ui.form .grouped.inline.fields .field { display: block; margin: 0.5em 0; padding: 0; } /*-------------------- Fields ---------------------*/ /* Split fields */ .ui.form .fields { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin: 0 -0.5em 1em; } .ui.form .fields > .field { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; padding-left: 0.5em; padding-right: 0.5em; } .ui.form .fields > .field:first-child { border-left: none; -webkit-box-shadow: none; box-shadow: none; } /* Other Combinations */ .ui.form .two.fields > .fields, .ui.form .two.fields > .field { width: 50%; } .ui.form .three.fields > .fields, .ui.form .three.fields > .field { width: 33.33333333%; } .ui.form .four.fields > .fields, .ui.form .four.fields > .field { width: 25%; } .ui.form .five.fields > .fields, .ui.form .five.fields > .field { width: 20%; } .ui.form .six.fields > .fields, .ui.form .six.fields > .field { width: 16.66666667%; } .ui.form .seven.fields > .fields, .ui.form .seven.fields > .field { width: 14.28571429%; } .ui.form .eight.fields > .fields, .ui.form .eight.fields > .field { width: 12.5%; } .ui.form .nine.fields > .fields, .ui.form .nine.fields > .field { width: 11.11111111%; } .ui.form .ten.fields > .fields, .ui.form .ten.fields > .field { width: 10%; } /* Swap to full width on mobile */ @media only screen and (max-width: 767.98px) { .ui.form .fields { -ms-flex-wrap: wrap; flex-wrap: wrap; } .ui[class*="equal width"].form:not(.unstackable) .fields > .field, .ui.form:not(.unstackable) [class*="equal width"].fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .field { width: 100% !important; margin: 0 0 1em; } } /* Sizing Combinations */ .ui.form .fields .wide.field { width: 6.25%; padding-left: 0.5em; padding-right: 0.5em; } .ui.form .one.wide.field { width: 6.25% !important; } .ui.form .two.wide.field { width: 12.5% !important; } .ui.form .three.wide.field { width: 18.75% !important; } .ui.form .four.wide.field { width: 25% !important; } .ui.form .five.wide.field { width: 31.25% !important; } .ui.form .six.wide.field { width: 37.5% !important; } .ui.form .seven.wide.field { width: 43.75% !important; } .ui.form .eight.wide.field { width: 50% !important; } .ui.form .nine.wide.field { width: 56.25% !important; } .ui.form .ten.wide.field { width: 62.5% !important; } .ui.form .eleven.wide.field { width: 68.75% !important; } .ui.form .twelve.wide.field { width: 75% !important; } .ui.form .thirteen.wide.field { width: 81.25% !important; } .ui.form .fourteen.wide.field { width: 87.5% !important; } .ui.form .fifteen.wide.field { width: 93.75% !important; } .ui.form .sixteen.wide.field { width: 100% !important; } /* Swap to full width on mobile */ @media only screen and (max-width: 767.98px) { .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .sixteen.wide.field { width: 100% !important; } .ui.form .fields { margin-bottom: 0; } } /*-------------------- Equal Width ---------------------*/ .ui[class*="equal width"].form .fields > .field, .ui.form [class*="equal width"].fields > .field { width: 100%; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } /*-------------------- Inline Fields ---------------------*/ .ui.form .inline.fields { margin: 0 0 1em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .ui.form .inline.fields .field { margin: 0; padding: 0 1em 0 0; } /* Inline Label */ .ui.form .inline.fields > label, .ui.form .inline.fields .field > label, .ui.form .inline.fields .field > p, .ui.form .inline.field > label, .ui.form .inline.field > p { display: inline-block; width: auto; margin-top: 0; margin-bottom: 0; vertical-align: baseline; font-size: 0.92857143em; font-weight: bold; color: #AAAAAA; text-transform: none; } /* Grouped Inline Label */ .ui.form .inline.fields > label { margin: 0.035714em 1em 0 0; } /* Inline Input */ .ui.form .inline.fields .field > input, .ui.form .inline.fields .field > select, .ui.form .inline.field > input, .ui.form .inline.field > select { display: inline-block; width: auto; margin-top: 0; margin-bottom: 0; vertical-align: middle; font-size: 1em; } /* Label */ .ui.form .inline.fields .field > :first-child, .ui.form .inline.field > :first-child { margin: 0 0.85714286em 0 0; } .ui.form .inline.fields .field > :only-child, .ui.form .inline.field > :only-child { margin: 0; } /* Wide */ .ui.form .inline.fields .wide.field { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .ui.form .inline.fields .wide.field > input, .ui.form .inline.fields .wide.field > select { width: 100%; } /*-------------------- Sizes ---------------------*/ .ui.mini.form { font-size: 0.78571429rem; } .ui.tiny.form { font-size: 0.85714286rem; } .ui.small.form { font-size: 0.92857143rem; } .ui.form { font-size: 1rem; } .ui.large.form { font-size: 1.14285714rem; } .ui.big.form { font-size: 1.28571429rem; } .ui.huge.form { font-size: 1.42857143rem; } .ui.massive.form { font-size: 1.71428571rem; } /* Dropdown */ .ui.mini.form .field .dropdown { font-size: 0.78571429rem; } .ui.tiny.form .field .dropdown { font-size: 0.85714286rem; } .ui.small.form .field .dropdown { font-size: 0.92857143rem; } .ui.form .field .dropdown { font-size: 1rem; } .ui.large.form .field .dropdown { font-size: 1.14285714rem; } .ui.big.form .field .dropdown { font-size: 1.28571429rem; } .ui.huge.form .field .dropdown { font-size: 1.42857143rem; } .ui.massive.form .field .dropdown { font-size: 1.71428571rem; } /* Dropdown Items */ .ui.mini.form .field .dropdown .menu > .item { font-size: 0.78571429rem; } .ui.tiny.form .field .dropdown .menu > .item { font-size: 0.85714286rem; } .ui.small.form .field .dropdown .menu > .item { font-size: 0.92857143rem; } .ui.form .field .dropdown .menu > .item { font-size: 1rem; } .ui.large.form .field .dropdown .menu > .item { font-size: 1.14285714rem; } .ui.big.form .field .dropdown .menu > .item { font-size: 1.28571429rem; } .ui.huge.form .field .dropdown .menu > .item { font-size: 1.42857143rem; } .ui.massive.form .field .dropdown .menu > .item { font-size: 1.71428571rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/