wishthis/semantic/dist/components/form.css

/*!
 * # Fomantic-UI 2.9.3 - Form
 * https://github.com/fomantic/Fomantic-UI/
 *
 *
 * Released under the MIT license
 * https://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 .fields .fields,
.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;
  font-size: 0.92857143em;
  font-weight: bold;
  text-transform: none;
}
.ui.form:not(.inverted) .field > label:not(.button) {
  color: rgba(0, 0, 0, 0.87);
}

/* --------------------
    Standard Inputs
--------------------- */
.ui.form textarea,
.ui.form input:not([type]),
.ui.form input[type="color"],
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="month"],
.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"],
.ui.form input[type="week"] {
  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="color"],
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="month"],
.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"],
.ui.form input[type="week"] {
  font-family: 'Raleway', 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: #fff;
  border: 1px solid rgba(34, 36, 38, 0.15);
  color: rgba(0, 0, 0, 0.87);
  border-radius: 0.28571429rem;
  box-shadow: 0 0 0 0 transparent inset;
  transition: color 0.1s ease, border-color 0.1s ease;
}
.ui.form input[type="color"] {
  padding: initial;
}
.ui.form input::-webkit-calendar-picker-indicator {
  padding: 0;
  opacity: 0.5;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

/* 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: #fff;
  border: 1px solid rgba(34, 36, 38, 0.15);
  outline: none;
  color: rgba(0, 0, 0, 0.87);
  border-radius: 0.28571429rem;
  box-shadow: 0 0 0 0 transparent inset;
  transition: color 0.1s ease, border-color 0.1s ease;
  font-size: 1em;
  font-family: 'Raleway', 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;
  box-shadow: none !important;
}

/* --------------------------
  Input w/ attached Button
--------------------------- */
.ui.form input.attached {
  width: auto;
}

/* --------------------
     Basic Select
--------------------- */
.ui.form select {
  display: block;
  height: auto;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(34, 36, 38, 0.15);
  border-radius: 0.28571429rem;
  box-shadow: 0 0 0 0 transparent inset;
  padding: 0.62em 1em;
  color: rgba(0, 0, 0, 0.87);
  transition: color 0.1s ease, border-color 0.1s ease;
}

/* --------------------
       Dropdown
--------------------- */

/* Block */
.ui.form .field > .selection.dropdown:not(.compact) {
  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 {
  flex: 1 0 auto;
  width: 0;
}

/* --------------------
   Types of Messages
--------------------- */
.ui.form .error.message,
.ui.form .error.message:empty {
  display: none;
}
.ui.form .info.message,
.ui.form .info.message:empty {
  display: none;
}
.ui.form .success.message,
.ui.form .success.message:empty {
  display: none;
}
.ui.form .warning.message,
.ui.form .warning.message:empty {
  display: none;
}

/* Assumptions */
.ui.form .message:first-child {
  margin-top: 0;
}

/* --------------------
   Validation Prompt
--------------------- */
.ui.form .field .prompt.label {
  white-space: normal;
  background: #fff !important;
  border: 1px solid #e0b4b4 !important;
  color: #9f3a38 !important;
}
.ui.form .field .prompt.label li::before {
  color: #9f3a38;
}
.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 {
  box-shadow: 0 0 0 100px #fffff0 inset !important;
  border-color: #e5dfa1 !important;
}

/* Focus */
.ui.form .field.field input:-webkit-autofill:focus {
  box-shadow: 0 0 0 100px #fffff0 inset !important;
  border-color: #d5c315 !important;
}

/* --------------------
      Placeholder
--------------------- */

/* browsers require these rules separate */
.ui.form :-ms-input-placeholder {
  color: rgba(191, 191, 191, 0.87);
}
.ui.form ::-ms-input-placeholder {
  color: rgba(191, 191, 191, 0.87);
}
.ui.form ::placeholder {
  color: rgba(191, 191, 191, 0.87);
}
.ui.form :focus:-ms-input-placeholder {
  color: rgba(115, 115, 115, 0.87);
}
.ui.form :focus::-ms-input-placeholder {
  color: rgba(115, 115, 115, 0.87);
}
.ui.form :focus::placeholder {
  color: rgba(115, 115, 115, 0.87);
}

/* --------------------
        Focus
--------------------- */
.ui.form input:not([type]):focus,
.ui.form input[type="color"]:focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="month"]: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,
.ui.form input[type="week"]:focus {
  color: rgba(0, 0, 0, 0.95);
  border-color: #a285df;
  border-radius: 0.28571429rem;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
}
.ui.form .ui.action.input:not([class*="left action"]) input:not([type]):focus,
.ui.form .ui.action.input:not([class*="left action"]) input[type="color"]:focus,
.ui.form .ui.action.input:not([class*="left action"]) input[type="date"]:focus,
.ui.form .ui.action.input:not([class*="left action"]) input[type="datetime-local"]:focus,
.ui.form .ui.action.input:not([class*="left action"]) input[type="email"]:focus,
.ui.form .ui.action.input:not([class*="left action"]) input[type="month"]:focus,
.ui.form .ui.action.input:not([class*="left action"]) input[type="number"]:focus,
.ui.form .ui.action.input:not([class*="left action"]) input[type="password"]:focus,
.ui.form .ui.action.input:not([class*="left action"]) input[type="search"]:focus,
.ui.form .ui.action.input:not([class*="left action"]) input[type="tel"]:focus,
.ui.form .ui.action.input:not([class*="left action"]) input[type="time"]:focus,
.ui.form .ui.action.input:not([class*="left action"]) input[type="text"]:focus,
.ui.form .ui.action.input:not([class*="left action"]) input[type="file"]:focus,
.ui.form .ui.action.input:not([class*="left action"]) input[type="url"]:focus,
.ui.form .ui.action.input:not([class*="left action"]) input[type="week"]:focus {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ui.form .ui[class*="left action"].input input:not([type]),
.ui.form .ui[class*="left action"].input input[type="color"],
.ui.form .ui[class*="left action"].input input[type="date"],
.ui.form .ui[class*="left action"].input input[type="datetime-local"],
.ui.form .ui[class*="left action"].input input[type="email"],
.ui.form .ui[class*="left action"].input input[type="month"],
.ui.form .ui[class*="left action"].input input[type="number"],
.ui.form .ui[class*="left action"].input input[type="password"],
.ui.form .ui[class*="left action"].input input[type="search"],
.ui.form .ui[class*="left action"].input input[type="tel"],
.ui.form .ui[class*="left action"].input input[type="time"],
.ui.form .ui[class*="left action"].input input[type="text"],
.ui.form .ui[class*="left action"].input input[type="file"],
.ui.form .ui[class*="left action"].input input[type="url"],
.ui.form .ui[class*="left action"].input input[type="week"] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.ui.form textarea:focus {
  color: rgba(0, 0, 0, 0.95);
  border-color: #a285df;
  border-radius: 0.28571429rem;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
  -webkit-appearance: none;
}

/* Focus */
.ui.form input:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* --------------------
            States
    --------------------- */

/* 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: flex;
}

/* On Field(s) */
.ui.form .fields.error .error.message:not(:empty),
.ui.form .field.error .error.message:not(:empty) {
  display: block;
}
.ui.form .fields.error .compact.error.message:not(:empty),
.ui.form .field.error .compact.error.message:not(:empty) {
  display: inline-block;
}
.ui.form .fields.error .icon.error.message:not(:empty),
.ui.form .field.error .icon.error.message:not(:empty) {
  display: flex;
}
.ui.ui.form .fields.error .field label,
.ui.ui.form .fields.error .field .ui.label:not(.corner),
.ui.ui.form .field.error label,
.ui.ui.form .field.error .ui.label:not(.corner),
.ui.ui.form .fields.error .field .input,
.ui.ui.form .field.error .input {
  color: #9f3a38;
}
.ui.form .fields.error .field .ui.label,
.ui.form .field.error .ui.label {
  background-color: #ecd1d1;
}
.ui.form .fields.error .field .corner.label,
.ui.form .field.error .corner.label {
  border-color: #9f3a38;
  color: #fff;
}
.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="color"],
.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="month"],
.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 .fields.error .field input[type="week"],
.ui.form .field.error textarea,
.ui.form .field.error select,
.ui.form .field.error input:not([type]),
.ui.form .field.error input[type="color"],
.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="month"],
.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"],
.ui.form .field.error input[type="week"] {
  color: #9f3a38;
  background: #fff6f6;
  border-color: #e0b4b4;
  border-radius: "";
  box-shadow: none;
}
.ui.form .field input:not(:-ms-input-placeholder):invalid {
  color: #9f3a38;
  background: #fff6f6;
  border-color: #e0b4b4;
  border-radius: "";
  box-shadow: none;
}
.ui.form .field input:not(:placeholder-shown):invalid {
  color: #9f3a38;
  background: #fff6f6;
  border-color: #e0b4b4;
  border-radius: "";
  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="color"]: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="month"]: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,
.ui.form .field.error input[type="week"]:focus {
  background: #fff6f6;
  border-color: #e0b4b4;
  color: #9f3a38;
  box-shadow: none;
}

/* Preserve Native Select Stylings */
.ui.form .field.error select {
  -webkit-appearance: menulist-button;
}

/*------------------
            Input State
        --------------------*/


/* Transparent */
.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;
}

/* Autofilled */
.ui.form .error.error input:-webkit-autofill {
  box-shadow: 0 0 0 100px #fffaf0 inset !important;
  border-color: #e0b4b4 !important;
}

/* Placeholder */
.ui.form .error :-ms-input-placeholder {
  color: #e7bdbc;
}
.ui.form .error ::-ms-input-placeholder {
  color: #e7bdbc;
}
.ui.form .error ::placeholder {
  color: #e7bdbc;
}
.ui.form .error :focus:-ms-input-placeholder {
  color: #da9796;
}
.ui.form .error :focus::-ms-input-placeholder {
  color: #da9796;
}
.ui.form .error :focus::placeholder {
  color: #da9796;
}

/*------------------
            Dropdown State
        --------------------*/

.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 State
        ---------------------*/

.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
.ui.form .field.error .checkbox:not(.toggle):not(.slider) label {
  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 {
  background: #fff6f6;
  border-color: #e0b4b4;
}
.ui.form .fields.error .field .checkbox label::after,
.ui.form .field.error .checkbox label::after {
  color: #9f3a38;
}
.ui.inverted.form .fields.error .field label,
.ui.inverted.form .error.field label {
  color: #ecd1d1;
}

/* On Form */
.ui.form.info .info.message:not(:empty) {
  display: block;
}
.ui.form.info .compact.info.message:not(:empty) {
  display: inline-block;
}
.ui.form.info .icon.info.message:not(:empty) {
  display: flex;
}

/* On Field(s) */
.ui.form .fields.info .info.message:not(:empty),
.ui.form .field.info .info.message:not(:empty) {
  display: block;
}
.ui.form .fields.info .compact.info.message:not(:empty),
.ui.form .field.info .compact.info.message:not(:empty) {
  display: inline-block;
}
.ui.form .fields.info .icon.info.message:not(:empty),
.ui.form .field.info .icon.info.message:not(:empty) {
  display: flex;
}
.ui.ui.form .fields.info .field label,
.ui.ui.form .fields.info .field .ui.label:not(.corner),
.ui.ui.form .field.info label,
.ui.ui.form .field.info .ui.label:not(.corner),
.ui.ui.form .fields.info .field .input,
.ui.ui.form .field.info .input {
  color: #276f86;
}
.ui.form .fields.info .field .ui.label,
.ui.form .field.info .ui.label {
  background-color: #c6e3e9;
}
.ui.form .fields.info .field .corner.label,
.ui.form .field.info .corner.label {
  border-color: #276f86;
  color: #fff;
}
.ui.form .fields.info .field textarea,
.ui.form .fields.info .field select,
.ui.form .fields.info .field input:not([type]),
.ui.form .fields.info .field input[type="color"],
.ui.form .fields.info .field input[type="date"],
.ui.form .fields.info .field input[type="datetime-local"],
.ui.form .fields.info .field input[type="email"],
.ui.form .fields.info .field input[type="month"],
.ui.form .fields.info .field input[type="number"],
.ui.form .fields.info .field input[type="password"],
.ui.form .fields.info .field input[type="search"],
.ui.form .fields.info .field input[type="tel"],
.ui.form .fields.info .field input[type="time"],
.ui.form .fields.info .field input[type="text"],
.ui.form .fields.info .field input[type="file"],
.ui.form .fields.info .field input[type="url"],
.ui.form .fields.info .field input[type="week"],
.ui.form .field.info textarea,
.ui.form .field.info select,
.ui.form .field.info input:not([type]),
.ui.form .field.info input[type="color"],
.ui.form .field.info input[type="date"],
.ui.form .field.info input[type="datetime-local"],
.ui.form .field.info input[type="email"],
.ui.form .field.info input[type="month"],
.ui.form .field.info input[type="number"],
.ui.form .field.info input[type="password"],
.ui.form .field.info input[type="search"],
.ui.form .field.info input[type="tel"],
.ui.form .field.info input[type="time"],
.ui.form .field.info input[type="text"],
.ui.form .field.info input[type="file"],
.ui.form .field.info input[type="url"],
.ui.form .field.info input[type="week"] {
  color: #276f86;
  background: #f8ffff;
  border-color: #a9d5de;
  border-radius: "";
  box-shadow: none;
}
.ui.form .field.info textarea:focus,
.ui.form .field.info select:focus,
.ui.form .field.info input:not([type]):focus,
.ui.form .field.info input[type="color"]:focus,
.ui.form .field.info input[type="date"]:focus,
.ui.form .field.info input[type="datetime-local"]:focus,
.ui.form .field.info input[type="email"]:focus,
.ui.form .field.info input[type="month"]:focus,
.ui.form .field.info input[type="number"]:focus,
.ui.form .field.info input[type="password"]:focus,
.ui.form .field.info input[type="search"]:focus,
.ui.form .field.info input[type="tel"]:focus,
.ui.form .field.info input[type="time"]:focus,
.ui.form .field.info input[type="text"]:focus,
.ui.form .field.info input[type="file"]:focus,
.ui.form .field.info input[type="url"]:focus,
.ui.form .field.info input[type="week"]:focus {
  background: #f8ffff;
  border-color: #a9d5de;
  color: #276f86;
  box-shadow: none;
}

/* Preserve Native Select Stylings */
.ui.form .field.info select {
  -webkit-appearance: menulist-button;
}

/*------------------
            Input State
        --------------------*/


/* Transparent */
.ui.form .field.info .transparent.input input,
.ui.form .field.info .transparent.input textarea,
.ui.form .field.info input.transparent,
.ui.form .field.info textarea.transparent {
  background-color: #f8ffff !important;
  color: #276f86 !important;
}

/* Autofilled */
.ui.form .info.info input:-webkit-autofill {
  box-shadow: 0 0 0 100px #f0faff inset !important;
  border-color: #b3e0e0 !important;
}

/* Placeholder */
.ui.form .info :-ms-input-placeholder {
  color: #98cfe1;
}
.ui.form .info ::-ms-input-placeholder {
  color: #98cfe1;
}
.ui.form .info ::placeholder {
  color: #98cfe1;
}
.ui.form .info :focus:-ms-input-placeholder {
  color: #70bdd6;
}
.ui.form .info :focus::-ms-input-placeholder {
  color: #70bdd6;
}
.ui.form .info :focus::placeholder {
  color: #70bdd6;
}

/*------------------
            Dropdown State
        --------------------*/

.ui.form .fields.info .field .ui.dropdown,
.ui.form .fields.info .field .ui.dropdown .item,
.ui.form .field.info .ui.dropdown,
.ui.form .field.info .ui.dropdown > .text,
.ui.form .field.info .ui.dropdown .item {
  background: #f8ffff;
  color: #276f86;
}
.ui.form .fields.info .field .ui.dropdown,
.ui.form .field.info .ui.dropdown {
  border-color: #a9d5de !important;
}
.ui.form .fields.info .field .ui.dropdown:hover,
.ui.form .field.info .ui.dropdown:hover {
  border-color: #a9d5de !important;
}
.ui.form .fields.info .field .ui.dropdown:hover .menu,
.ui.form .field.info .ui.dropdown:hover .menu {
  border-color: #a9d5de;
}
.ui.form .fields.info .field .ui.multiple.selection.dropdown > .label,
.ui.form .field.info .ui.multiple.selection.dropdown > .label {
  background-color: #cce3ea;
  color: #276f86;
}

/* Hover */
.ui.form .fields.info .field .ui.dropdown .menu .item:hover,
.ui.form .field.info .ui.dropdown .menu .item:hover {
  background-color: #e9f2fb;
}

/* Selected */
.ui.form .fields.info .field .ui.dropdown .menu .selected.item,
.ui.form .field.info .ui.dropdown .menu .selected.item {
  background-color: #e9f2fb;
}

/* Active */
.ui.form .fields.info .field .ui.dropdown .menu .active.item,
.ui.form .field.info .ui.dropdown .menu .active.item {
  background-color: #cef1fd !important;
}

/*--------------------
            Checkbox State
        ---------------------*/

.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label,
.ui.form .field.info .checkbox:not(.toggle):not(.slider) label {
  color: #276f86;
}
.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label::before,
.ui.form .field.info .checkbox:not(.toggle):not(.slider) label::before {
  background: #f8ffff;
  border-color: #a9d5de;
}
.ui.form .fields.info .field .checkbox label::after,
.ui.form .field.info .checkbox label::after {
  color: #276f86;
}
.ui.inverted.form .fields.info .field label,
.ui.inverted.form .info.field label {
  color: #c6e3e9;
}

/* 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: flex;
}

/* On Field(s) */
.ui.form .fields.success .success.message:not(:empty),
.ui.form .field.success .success.message:not(:empty) {
  display: block;
}
.ui.form .fields.success .compact.success.message:not(:empty),
.ui.form .field.success .compact.success.message:not(:empty) {
  display: inline-block;
}
.ui.form .fields.success .icon.success.message:not(:empty),
.ui.form .field.success .icon.success.message:not(:empty) {
  display: flex;
}
.ui.ui.form .fields.success .field label,
.ui.ui.form .fields.success .field .ui.label:not(.corner),
.ui.ui.form .field.success label,
.ui.ui.form .field.success .ui.label:not(.corner),
.ui.ui.form .fields.success .field .input,
.ui.ui.form .field.success .input {
  color: #2c662d;
}
.ui.form .fields.success .field .ui.label,
.ui.form .field.success .ui.label {
  background-color: #b9d1ad;
}
.ui.form .fields.success .field .corner.label,
.ui.form .field.success .corner.label {
  border-color: #2c662d;
  color: #fff;
}
.ui.form .fields.success .field textarea,
.ui.form .fields.success .field select,
.ui.form .fields.success .field input:not([type]),
.ui.form .fields.success .field input[type="color"],
.ui.form .fields.success .field input[type="date"],
.ui.form .fields.success .field input[type="datetime-local"],
.ui.form .fields.success .field input[type="email"],
.ui.form .fields.success .field input[type="month"],
.ui.form .fields.success .field input[type="number"],
.ui.form .fields.success .field input[type="password"],
.ui.form .fields.success .field input[type="search"],
.ui.form .fields.success .field input[type="tel"],
.ui.form .fields.success .field input[type="time"],
.ui.form .fields.success .field input[type="text"],
.ui.form .fields.success .field input[type="file"],
.ui.form .fields.success .field input[type="url"],
.ui.form .fields.success .field input[type="week"],
.ui.form .field.success textarea,
.ui.form .field.success select,
.ui.form .field.success input:not([type]),
.ui.form .field.success input[type="color"],
.ui.form .field.success input[type="date"],
.ui.form .field.success input[type="datetime-local"],
.ui.form .field.success input[type="email"],
.ui.form .field.success input[type="month"],
.ui.form .field.success input[type="number"],
.ui.form .field.success input[type="password"],
.ui.form .field.success input[type="search"],
.ui.form .field.success input[type="tel"],
.ui.form .field.success input[type="time"],
.ui.form .field.success input[type="text"],
.ui.form .field.success input[type="file"],
.ui.form .field.success input[type="url"],
.ui.form .field.success input[type="week"] {
  color: #2c662d;
  background: #fcfff5;
  border-color: #a3c293;
  border-radius: "";
  box-shadow: none;
}
.ui.form .field.success textarea:focus,
.ui.form .field.success select:focus,
.ui.form .field.success input:not([type]):focus,
.ui.form .field.success input[type="color"]:focus,
.ui.form .field.success input[type="date"]:focus,
.ui.form .field.success input[type="datetime-local"]:focus,
.ui.form .field.success input[type="email"]:focus,
.ui.form .field.success input[type="month"]:focus,
.ui.form .field.success input[type="number"]:focus,
.ui.form .field.success input[type="password"]:focus,
.ui.form .field.success input[type="search"]:focus,
.ui.form .field.success input[type="tel"]:focus,
.ui.form .field.success input[type="time"]:focus,
.ui.form .field.success input[type="text"]:focus,
.ui.form .field.success input[type="file"]:focus,
.ui.form .field.success input[type="url"]:focus,
.ui.form .field.success input[type="week"]:focus {
  background: #fcfff5;
  border-color: #a3c293;
  color: #2c662d;
  box-shadow: none;
}

/* Preserve Native Select Stylings */
.ui.form .field.success select {
  -webkit-appearance: menulist-button;
}

/*------------------
            Input State
        --------------------*/


/* Transparent */
.ui.form .field.success .transparent.input input,
.ui.form .field.success .transparent.input textarea,
.ui.form .field.success input.transparent,
.ui.form .field.success textarea.transparent {
  background-color: #fcfff5 !important;
  color: #2c662d !important;
}

/* Autofilled */
.ui.form .success.success input:-webkit-autofill {
  box-shadow: 0 0 0 100px #f0fff0 inset !important;
  border-color: #bee0b3 !important;
}

/* Placeholder */
.ui.form .success :-ms-input-placeholder {
  color: #8fcf90;
}
.ui.form .success ::-ms-input-placeholder {
  color: #8fcf90;
}
.ui.form .success ::placeholder {
  color: #8fcf90;
}
.ui.form .success :focus:-ms-input-placeholder {
  color: #6cbf6d;
}
.ui.form .success :focus::-ms-input-placeholder {
  color: #6cbf6d;
}
.ui.form .success :focus::placeholder {
  color: #6cbf6d;
}

/*------------------
            Dropdown State
        --------------------*/

.ui.form .fields.success .field .ui.dropdown,
.ui.form .fields.success .field .ui.dropdown .item,
.ui.form .field.success .ui.dropdown,
.ui.form .field.success .ui.dropdown > .text,
.ui.form .field.success .ui.dropdown .item {
  background: #fcfff5;
  color: #2c662d;
}
.ui.form .fields.success .field .ui.dropdown,
.ui.form .field.success .ui.dropdown {
  border-color: #a3c293 !important;
}
.ui.form .fields.success .field .ui.dropdown:hover,
.ui.form .field.success .ui.dropdown:hover {
  border-color: #a3c293 !important;
}
.ui.form .fields.success .field .ui.dropdown:hover .menu,
.ui.form .field.success .ui.dropdown:hover .menu {
  border-color: #a3c293;
}
.ui.form .fields.success .field .ui.multiple.selection.dropdown > .label,
.ui.form .field.success .ui.multiple.selection.dropdown > .label {
  background-color: #cceacc;
  color: #2c662d;
}

/* Hover */
.ui.form .fields.success .field .ui.dropdown .menu .item:hover,
.ui.form .field.success .ui.dropdown .menu .item:hover {
  background-color: #e9fbe9;
}

/* Selected */
.ui.form .fields.success .field .ui.dropdown .menu .selected.item,
.ui.form .field.success .ui.dropdown .menu .selected.item {
  background-color: #e9fbe9;
}

/* Active */
.ui.form .fields.success .field .ui.dropdown .menu .active.item,
.ui.form .field.success .ui.dropdown .menu .active.item {
  background-color: #dafdce !important;
}

/*--------------------
            Checkbox State
        ---------------------*/

.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label,
.ui.form .field.success .checkbox:not(.toggle):not(.slider) label {
  color: #2c662d;
}
.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label::before,
.ui.form .field.success .checkbox:not(.toggle):not(.slider) label::before {
  background: #fcfff5;
  border-color: #a3c293;
}
.ui.form .fields.success .field .checkbox label::after,
.ui.form .field.success .checkbox label::after {
  color: #2c662d;
}
.ui.inverted.form .fields.success .field label,
.ui.inverted.form .success.field label {
  color: #b9d1ad;
}

/* 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: flex;
}

/* On Field(s) */
.ui.form .fields.warning .warning.message:not(:empty),
.ui.form .field.warning .warning.message:not(:empty) {
  display: block;
}
.ui.form .fields.warning .compact.warning.message:not(:empty),
.ui.form .field.warning .compact.warning.message:not(:empty) {
  display: inline-block;
}
.ui.form .fields.warning .icon.warning.message:not(:empty),
.ui.form .field.warning .icon.warning.message:not(:empty) {
  display: flex;
}
.ui.ui.form .fields.warning .field label,
.ui.ui.form .fields.warning .field .ui.label:not(.corner),
.ui.ui.form .field.warning label,
.ui.ui.form .field.warning .ui.label:not(.corner),
.ui.ui.form .fields.warning .field .input,
.ui.ui.form .field.warning .input {
  color: #573a08;
}
.ui.form .fields.warning .field .ui.label,
.ui.form .field.warning .ui.label {
  background-color: #d7ccb5;
}
.ui.form .fields.warning .field .corner.label,
.ui.form .field.warning .corner.label {
  border-color: #573a08;
  color: #fff;
}
.ui.form .fields.warning .field textarea,
.ui.form .fields.warning .field select,
.ui.form .fields.warning .field input:not([type]),
.ui.form .fields.warning .field input[type="color"],
.ui.form .fields.warning .field input[type="date"],
.ui.form .fields.warning .field input[type="datetime-local"],
.ui.form .fields.warning .field input[type="email"],
.ui.form .fields.warning .field input[type="month"],
.ui.form .fields.warning .field input[type="number"],
.ui.form .fields.warning .field input[type="password"],
.ui.form .fields.warning .field input[type="search"],
.ui.form .fields.warning .field input[type="tel"],
.ui.form .fields.warning .field input[type="time"],
.ui.form .fields.warning .field input[type="text"],
.ui.form .fields.warning .field input[type="file"],
.ui.form .fields.warning .field input[type="url"],
.ui.form .fields.warning .field input[type="week"],
.ui.form .field.warning textarea,
.ui.form .field.warning select,
.ui.form .field.warning input:not([type]),
.ui.form .field.warning input[type="color"],
.ui.form .field.warning input[type="date"],
.ui.form .field.warning input[type="datetime-local"],
.ui.form .field.warning input[type="email"],
.ui.form .field.warning input[type="month"],
.ui.form .field.warning input[type="number"],
.ui.form .field.warning input[type="password"],
.ui.form .field.warning input[type="search"],
.ui.form .field.warning input[type="tel"],
.ui.form .field.warning input[type="time"],
.ui.form .field.warning input[type="text"],
.ui.form .field.warning input[type="file"],
.ui.form .field.warning input[type="url"],
.ui.form .field.warning input[type="week"] {
  color: #573a08;
  background: #fffaf3;
  border-color: #c9ba9b;
  border-radius: "";
  box-shadow: none;
}
.ui.form .field.warning textarea:focus,
.ui.form .field.warning select:focus,
.ui.form .field.warning input:not([type]):focus,
.ui.form .field.warning input[type="color"]:focus,
.ui.form .field.warning input[type="date"]:focus,
.ui.form .field.warning input[type="datetime-local"]:focus,
.ui.form .field.warning input[type="email"]:focus,
.ui.form .field.warning input[type="month"]:focus,
.ui.form .field.warning input[type="number"]:focus,
.ui.form .field.warning input[type="password"]:focus,
.ui.form .field.warning input[type="search"]:focus,
.ui.form .field.warning input[type="tel"]:focus,
.ui.form .field.warning input[type="time"]:focus,
.ui.form .field.warning input[type="text"]:focus,
.ui.form .field.warning input[type="file"]:focus,
.ui.form .field.warning input[type="url"]:focus,
.ui.form .field.warning input[type="week"]:focus {
  background: #fffaf3;
  border-color: #c9ba9b;
  color: #573a08;
  box-shadow: none;
}

/* Preserve Native Select Stylings */
.ui.form .field.warning select {
  -webkit-appearance: menulist-button;
}

/*------------------
            Input State
        --------------------*/


/* Transparent */
.ui.form .field.warning .transparent.input input,
.ui.form .field.warning .transparent.input textarea,
.ui.form .field.warning input.transparent,
.ui.form .field.warning textarea.transparent {
  background-color: #fffaf3 !important;
  color: #573a08 !important;
}

/* Autofilled */
.ui.form .warning.warning input:-webkit-autofill {
  box-shadow: 0 0 0 100px #ffffe0 inset !important;
  border-color: #e0e0b3 !important;
}

/* Placeholder */
.ui.form .warning :-ms-input-placeholder {
  color: #edad3e;
}
.ui.form .warning ::-ms-input-placeholder {
  color: #edad3e;
}
.ui.form .warning ::placeholder {
  color: #edad3e;
}
.ui.form .warning :focus:-ms-input-placeholder {
  color: #e39715;
}
.ui.form .warning :focus::-ms-input-placeholder {
  color: #e39715;
}
.ui.form .warning :focus::placeholder {
  color: #e39715;
}

/*------------------
            Dropdown State
        --------------------*/

.ui.form .fields.warning .field .ui.dropdown,
.ui.form .fields.warning .field .ui.dropdown .item,
.ui.form .field.warning .ui.dropdown,
.ui.form .field.warning .ui.dropdown > .text,
.ui.form .field.warning .ui.dropdown .item {
  background: #fffaf3;
  color: #573a08;
}
.ui.form .fields.warning .field .ui.dropdown,
.ui.form .field.warning .ui.dropdown {
  border-color: #c9ba9b !important;
}
.ui.form .fields.warning .field .ui.dropdown:hover,
.ui.form .field.warning .ui.dropdown:hover {
  border-color: #c9ba9b !important;
}
.ui.form .fields.warning .field .ui.dropdown:hover .menu,
.ui.form .field.warning .ui.dropdown:hover .menu {
  border-color: #c9ba9b;
}
.ui.form .fields.warning .field .ui.multiple.selection.dropdown > .label,
.ui.form .field.warning .ui.multiple.selection.dropdown > .label {
  background-color: #eaeacc;
  color: #573a08;
}

/* Hover */
.ui.form .fields.warning .field .ui.dropdown .menu .item:hover,
.ui.form .field.warning .ui.dropdown .menu .item:hover {
  background-color: #fbfbe9;
}

/* Selected */
.ui.form .fields.warning .field .ui.dropdown .menu .selected.item,
.ui.form .field.warning .ui.dropdown .menu .selected.item {
  background-color: #fbfbe9;
}

/* Active */
.ui.form .fields.warning .field .ui.dropdown .menu .active.item,
.ui.form .field.warning .ui.dropdown .menu .active.item {
  background-color: #fdfdce !important;
}

/*--------------------
            Checkbox State
        ---------------------*/

.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label,
.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label {
  color: #573a08;
}
.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label::before,
.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label::before {
  background: #fffaf3;
  border-color: #c9ba9b;
}
.ui.form .fields.warning .field .checkbox label::after,
.ui.form .field.warning .checkbox label::after {
  color: #573a08;
}
.ui.inverted.form .fields.warning .field label,
.ui.inverted.form .warning.field label {
  color: #d7ccb5;
}

/* --------------------
           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;
  animation: loader 0.6s infinite linear;
  border: 0.2em solid #767676;
  border-radius: 500rem;
  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.inverted.form .ui.checkbox label,
.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: #fff;
}
.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="color"],
.ui.inverted.form input[type="date"],
.ui.inverted.form input[type="datetime-local"],
.ui.inverted.form input[type="email"],
.ui.inverted.form input[type="month"],
.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"],
.ui.inverted.form input[type="week"] {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(0, 0, 0, 0.87);
  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: rgba(0, 0, 0, 0.87);
  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;
}
.ui.form .grouped.inline.fields .ui.checkbox {
  margin-bottom: 0.4em;
}

/* --------------------
        Fields
--------------------- */

/* Split fields */
.ui.form .fields {
  display: flex;
  flex-direction: row;
  margin: 0 -0.5em 1em;
}
.ui.form .fields > .field {
  flex: 0 1 auto;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.ui.form .fields > .field:first-child {
  border-left: 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 {
    flex-wrap: wrap;
    margin-bottom: 0;
  }
  .ui.form:not(.unstackable) .fields:not(.unstackable) > .fields,
  .ui.form:not(.unstackable) .fields:not(.unstackable) > .field {
    width: 100%;
    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%;
}
.ui.form .two.wide.field {
  width: 12.5%;
}
.ui.form .three.wide.field {
  width: 18.75%;
}
.ui.form .four.wide.field {
  width: 25%;
}
.ui.form .five.wide.field {
  width: 31.25%;
}
.ui.form .six.wide.field {
  width: 37.5%;
}
.ui.form .seven.wide.field {
  width: 43.75%;
}
.ui.form .eight.wide.field {
  width: 50%;
}
.ui.form .nine.wide.field {
  width: 56.25%;
}
.ui.form .ten.wide.field {
  width: 62.5%;
}
.ui.form .eleven.wide.field {
  width: 68.75%;
}
.ui.form .twelve.wide.field {
  width: 75%;
}
.ui.form .thirteen.wide.field {
  width: 81.25%;
}
.ui.form .fourteen.wide.field {
  width: 87.5%;
}
.ui.form .fifteen.wide.field {
  width: 93.75%;
}
.ui.form .sixteen.wide.field {
  width: 100%;
}

/* --------------------
     Equal Width
--------------------- */
.ui[class*="equal width"].form .fields > .field,
.ui.form [class*="equal width"].fields > .field {
  width: 100%;
  flex: 1 1 auto;
}

/* --------------------
        Inline Fields
    --------------------- */
.ui.form .inline.fields {
  margin: 0 0 1em;
  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: rgba(0, 0, 0, 0.87);
  text-transform: none;
}

/* Grouped Inline Label */
.ui.form .inline.fields > label {
  margin: 0.03571em 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;
}
.ui.form .inline.fields .field .calendar:not(.popup),
.ui.form .inline.field .calendar:not(.popup) {
  display: inline-block;
}
.ui.form .inline.fields .field .calendar:not(.popup) > .input > input,
.ui.form .inline.field .calendar:not(.popup) > .input > input {
  width: 13.11em;
}

/* 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: flex;
  align-items: center;
}
.ui.form .inline.fields .wide.field > input,
.ui.form .inline.fields .wide.field > select {
  width: 100%;
}

/* --------------------
        Sizes
--------------------- */
.ui.form,
.ui.form .field .dropdown,
.ui.form .field .dropdown .menu > .item {
  font-size: 1rem;
}
.ui.mini.form,
.ui.mini.form .field .dropdown,
.ui.mini.form .field .dropdown .menu > .item {
  font-size: 0.78571429rem;
}
.ui.tiny.form,
.ui.tiny.form .field .dropdown,
.ui.tiny.form .field .dropdown .menu > .item {
  font-size: 0.85714286rem;
}
.ui.small.form,
.ui.small.form .field .dropdown,
.ui.small.form .field .dropdown .menu > .item {
  font-size: 0.92857143rem;
}
.ui.large.form,
.ui.large.form .field .dropdown,
.ui.large.form .field .dropdown .menu > .item {
  font-size: 1.14285714rem;
}
.ui.big.form,
.ui.big.form .field .dropdown,
.ui.big.form .field .dropdown .menu > .item {
  font-size: 1.28571429rem;
}
.ui.huge.form,
.ui.huge.form .field .dropdown,
.ui.huge.form .field .dropdown .menu > .item {
  font-size: 1.42857143rem;
}
.ui.massive.form,
.ui.massive.form .field .dropdown,
.ui.massive.form .field .dropdown .menu > .item {
  font-size: 1.71428571rem;
}


/*******************************
         Theme Overrides
*******************************/



/*******************************
         Site Overrides
*******************************/