github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/form.css (about)

     1  /*!
     2   * # Semantic UI x.x - Form
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributors
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  
    13  /*******************************
    14              Elements
    15  *******************************/
    16  
    17  
    18  /*--------------------
    19          Form
    20  ---------------------*/
    21  
    22  .ui.form {
    23    position: relative;
    24    max-width: 100%;
    25  }
    26  
    27  /*--------------------
    28          Content
    29  ---------------------*/
    30  
    31  .ui.form > p {
    32    margin: 1em 0em;
    33  }
    34  
    35  /*--------------------
    36          Field
    37  ---------------------*/
    38  
    39  .ui.form .fields .field,
    40  .ui.form .field {
    41    clear: both;
    42    margin: 0em 0em 1em;
    43  }
    44  .ui.form .fields:last-child,
    45  .ui.form .field:last-child {
    46    margin-bottom: 0em;
    47  }
    48  
    49  /*--------------------
    50          Labels
    51  ---------------------*/
    52  
    53  .ui.form .field > label {
    54    display: block;
    55    margin: 0em 0em 0.2857rem 0em;
    56    color: rgba(0, 0, 0, 0.8);
    57    font-size: 0.9285em;
    58    font-weight: bold;
    59    text-transform: none;
    60  }
    61  .ui.form .grouped.fields > label {
    62    margin: 0em 0em 0.2857rem 0em;
    63    color: rgba(0, 0, 0, 0.8);
    64    font-size: 0.9285em;
    65    font-weight: bold;
    66    text-transform: none;
    67  }
    68  .ui.form .inline.fields > label {
    69    display: inline-block;
    70    vertical-align: middle;
    71    margin: 0em 1em 0em 0em;
    72    color: rgba(0, 0, 0, 0.8);
    73    font-size: 0.9285em;
    74    font-weight: bold;
    75    text-transform: none;
    76  }
    77  
    78  /*--------------------
    79      Standard Inputs
    80  ---------------------*/
    81  
    82  .ui.form textarea,
    83  .ui.form input:not([type]),
    84  .ui.form input[type="date"],
    85  .ui.form input[type="datetime-local"],
    86  .ui.form input[type="email"],
    87  .ui.form input[type="number"],
    88  .ui.form input[type="password"],
    89  .ui.form input[type="search"],
    90  .ui.form input[type="tel"],
    91  .ui.form input[type="time"],
    92  .ui.form input[type="text"],
    93  .ui.form input[type="url"],
    94  .ui.form .ui.input {
    95    width: 100%;
    96    vertical-align: top;
    97  }
    98  .ui.form input:not([type]),
    99  .ui.form input[type="date"],
   100  .ui.form input[type="datetime-local"],
   101  .ui.form input[type="email"],
   102  .ui.form input[type="number"],
   103  .ui.form input[type="password"],
   104  .ui.form input[type="search"],
   105  .ui.form input[type="tel"],
   106  .ui.form input[type="time"],
   107  .ui.form input[type="text"],
   108  .ui.form input[type="url"] {
   109    font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
   110    margin: 0em;
   111    outline: none;
   112    -webkit-appearance: none;
   113    tap-highlight-color: rgba(255, 255, 255, 0);
   114    line-height: 1.2142em;
   115    padding: 0.67861em 1em;
   116    font-size: 1em;
   117    background: #ffffff;
   118    border: 1px solid rgba(39, 41, 43, 0.15);
   119    color: rgba(0, 0, 0, 0.8);
   120    border-radius: 0.2857rem;
   121    box-shadow: 0em 0em 0em 0em transparent inset;
   122    -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
   123            transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
   124  }
   125  .ui.textarea,
   126  .ui.form textarea {
   127    margin: 0em;
   128    -webkit-appearance: none;
   129    tap-highlight-color: rgba(255, 255, 255, 0);
   130    padding: 0.78571em 1em;
   131    background: #ffffff;
   132    border: 1px solid rgba(39, 41, 43, 0.15);
   133    outline: none;
   134    color: rgba(0, 0, 0, 0.8);
   135    border-radius: 0.2857rem;
   136    box-shadow: 0em 0em 0em 0em transparent inset;
   137    -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
   138            transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
   139    font-size: 1em;
   140    height: 12em;
   141    min-height: 8em;
   142    max-height: 24em;
   143    line-height: 1.2857;
   144    resize: vertical;
   145  }
   146  .ui.form textarea,
   147  .ui.form input[type="checkbox"] {
   148    vertical-align: top;
   149  }
   150  
   151  /*--------------------------
   152    Input w/ attached Button
   153  ---------------------------*/
   154  
   155  .ui.form input.attached {
   156    width: auto;
   157  }
   158  
   159  /*--------------------
   160       Basic Select
   161  ---------------------*/
   162  
   163  .ui.form select {
   164    display: block;
   165    height: auto;
   166    width: 100%;
   167    background: #ffffff;
   168    border: 1px solid rgba(39, 41, 43, 0.15);
   169    border-radius: 0.2857rem;
   170    box-shadow: 0em 0em 0em 0em transparent inset;
   171    padding: 0.62em 1em;
   172    color: rgba(0, 0, 0, 0.8);
   173    -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
   174            transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
   175  }
   176  
   177  /*--------------------
   178         Dropdown
   179  ---------------------*/
   180  
   181  .ui.form .field > .selection.dropdown {
   182    width: 100%;
   183  }
   184  .ui.form .field > .selection.dropdown > .dropdown.icon {
   185    float: right;
   186  }
   187  .ui.form .inline.field > .selection.dropdown {
   188    width: auto;
   189  }
   190  .ui.form .inline.field > .selection.dropdown > .dropdown.icon {
   191    float: none;
   192  }
   193  
   194  /*--------------------
   195         Dividers
   196  ---------------------*/
   197  
   198  .ui.form .divider {
   199    clear: both;
   200    margin: 1em 0em;
   201  }
   202  
   203  /*--------------------
   204     Types of Messages
   205  ---------------------*/
   206  
   207  .ui.form .success.message,
   208  .ui.form .warning.message,
   209  .ui.form .error.message {
   210    display: none;
   211  }
   212  
   213  /* Assumptions */
   214  .ui.form .message:first-child {
   215    margin-top: 0px;
   216  }
   217  
   218  /*--------------------
   219     Validation Prompt
   220  ---------------------*/
   221  
   222  .ui.form .field .prompt.label {
   223    white-space: nowrap;
   224  }
   225  .ui.form .inline.field .prompt {
   226    margin: -0.5em 0em -0.5em 1em;
   227  }
   228  .ui.form .inline.field .prompt:before {
   229    margin-top: -0.3em;
   230    bottom: auto;
   231    right: auto;
   232    top: 50%;
   233    left: 0em;
   234  }
   235  
   236  
   237  /*******************************
   238              States
   239  *******************************/
   240  
   241  
   242  /*--------------------
   243        Placeholder
   244  ---------------------*/
   245  
   246  
   247  /* browsers require these rules separate */
   248  .ui.form ::-webkit-input-placeholder {
   249    color: rgba(140, 140, 140, 0.8);
   250  }
   251  .ui.form ::-moz-placeholder {
   252    color: rgba(140, 140, 140, 0.8);
   253  }
   254  .ui.form :focus::-webkit-input-placeholder {
   255    color: rgba(89, 89, 89, 0.8);
   256  }
   257  .ui.form :focus::-moz-placeholder {
   258    color: rgba(89, 89, 89, 0.8);
   259  }
   260  
   261  /* Error Placeholder */
   262  .ui.form .error ::-webkit-input-placeholder {
   263    color: #e38585;
   264  }
   265  .ui.form .error ::-moz-placeholder {
   266    color: #e38585;
   267  }
   268  .ui.form .error :focus::-webkit-input-placeholder {
   269    color: #de7171;
   270  }
   271  .ui.form .error :focus::-moz-placeholder {
   272    color: #de7171;
   273  }
   274  
   275  /*--------------------
   276          Focus
   277  ---------------------*/
   278  
   279  .ui.form input:not([type]):focus,
   280  .ui.form input[type="date"]:focus,
   281  .ui.form input[type="datetime-local"]:focus,
   282  .ui.form input[type="email"]:focus,
   283  .ui.form input[type="number"]:focus,
   284  .ui.form input[type="password"]:focus,
   285  .ui.form input[type="search"]:focus,
   286  .ui.form input[type="tel"]:focus,
   287  .ui.form input[type="time"]:focus,
   288  .ui.form input[type="text"]:focus,
   289  .ui.form input[type="url"]:focus {
   290    color: rgba(0, 0, 0, 0.85);
   291    border-color: rgba(39, 41, 43, 0.3);
   292    border-radius: 0em 0.2857rem 0.2857rem 0em;
   293    background: #ffffff;
   294    box-shadow: 1px 0em 0em 0em rgba(39, 41, 43, 0.3) inset;
   295  }
   296  .ui.form textarea:focus {
   297    color: rgba(0, 0, 0, 0.85);
   298    border-color: rgba(39, 41, 43, 0.3);
   299    border-radius: 0em 0.2857rem 0.2857rem 0em;
   300    background: #ffffff;
   301    box-shadow: 1px 0em 0em 0em rgba(39, 41, 43, 0.3) inset;
   302    -webkit-appearance: none;
   303  }
   304  
   305  /*--------------------
   306          Success
   307  ---------------------*/
   308  
   309  
   310  /* On Form */
   311  .ui.form.success .success.message {
   312    display: block;
   313  }
   314  
   315  /*--------------------
   316          Error
   317  ---------------------*/
   318  
   319  
   320  /* On Form */
   321  .ui.form.warning .warning.message {
   322    display: block;
   323  }
   324  
   325  /*--------------------
   326          Warning
   327  ---------------------*/
   328  
   329  
   330  /* On Form */
   331  .ui.form.error .error.message {
   332    display: block;
   333  }
   334  
   335  /* On Field(s) */
   336  .ui.form .fields.error .field label,
   337  .ui.form .field.error label,
   338  .ui.form .fields.error .field .input,
   339  .ui.form .field.error .input {
   340    color: #d95c5c;
   341  }
   342  .ui.form .fields.error .field .corner.label,
   343  .ui.form .field.error .corner.label {
   344    border-color: #d95c5c;
   345    color: #ffffff;
   346  }
   347  .ui.form .fields.error .field textarea,
   348  .ui.form .fields.error .field select,
   349  .ui.form .fields.error .field input:not([type]),
   350  .ui.form .fields.error .field input[type="date"],
   351  .ui.form .fields.error .field input[type="datetime-local"],
   352  .ui.form .fields.error .field input[type="email"],
   353  .ui.form .fields.error .field input[type="number"],
   354  .ui.form .fields.error .field input[type="password"],
   355  .ui.form .fields.error .field input[type="search"],
   356  .ui.form .fields.error .field input[type="tel"],
   357  .ui.form .fields.error .field input[type="time"],
   358  .ui.form .fields.error .field input[type="text"],
   359  .ui.form .fields.error .field input[type="url"],
   360  .ui.form .field.error textarea,
   361  .ui.form .field.error select,
   362  .ui.form .field.error input:not([type]),
   363  .ui.form .field.error input[type="date"],
   364  .ui.form .field.error input[type="datetime-local"],
   365  .ui.form .field.error input[type="email"],
   366  .ui.form .field.error input[type="number"],
   367  .ui.form .field.error input[type="password"],
   368  .ui.form .field.error input[type="search"],
   369  .ui.form .field.error input[type="tel"],
   370  .ui.form .field.error input[type="time"],
   371  .ui.form .field.error input[type="text"],
   372  .ui.form .field.error input[type="url"] {
   373    background: #fff0f0;
   374    border-color: #dbb1b1;
   375    color: #d95c5c;
   376    border-radius: 0em 0.2857rem 0.2857rem 0em;
   377    box-shadow: 2px 0em 0em 0em #d95c5c inset;
   378  }
   379  .ui.form .field.error textarea:focus,
   380  .ui.form .field.error select:focus,
   381  .ui.form .field.error input:not([type]):focus,
   382  .ui.form .field.error input[type="date"]:focus,
   383  .ui.form .field.error input[type="datetime-local"]:focus,
   384  .ui.form .field.error input[type="email"]:focus,
   385  .ui.form .field.error input[type="number"]:focus,
   386  .ui.form .field.error input[type="password"]:focus,
   387  .ui.form .field.error input[type="search"]:focus,
   388  .ui.form .field.error input[type="tel"]:focus,
   389  .ui.form .field.error input[type="time"]:focus,
   390  .ui.form .field.error input[type="text"]:focus,
   391  .ui.form .field.error input[type="url"]:focus {
   392    background: #fff0f0;
   393    border-color: #dbb1b1;
   394    color: #dc6868;
   395    -webkit-appearance: none;
   396    box-shadow: 2px 0em 0em 0em #dc6868 inset;
   397  }
   398  
   399  /* Preserve Native Select Stylings */
   400  .ui.form .field.error select {
   401    -webkit-appearance: menulist-button;
   402  }
   403  
   404  /*------------------
   405      Dropdown Error
   406  --------------------*/
   407  
   408  .ui.form .fields.error .field .ui.dropdown,
   409  .ui.form .fields.error .field .ui.dropdown .item,
   410  .ui.form .field.error .ui.dropdown,
   411  .ui.form .field.error .ui.dropdown .text,
   412  .ui.form .field.error .ui.dropdown .item {
   413    background: #fff0f0;
   414    color: #d95c5c;
   415  }
   416  .ui.form .fields.error .field .ui.dropdown,
   417  .ui.form .field.error .ui.dropdown {
   418    border-color: #dbb1b1 !important;
   419  }
   420  .ui.form .fields.error .field .ui.dropdown:hover,
   421  .ui.form .field.error .ui.dropdown:hover {
   422    border-color: #dbb1b1 !important;
   423  }
   424  .ui.form .fields.error .field .ui.dropdown:hover .menu,
   425  .ui.form .field.error .ui.dropdown:hover .menu {
   426    border-color: #dbb1b1;
   427  }
   428  
   429  /* Hover */
   430  .ui.form .fields.error .field .ui.dropdown .menu .item:hover,
   431  .ui.form .field.error .ui.dropdown .menu .item:hover {
   432    background-color: #fbe7e7;
   433  }
   434  
   435  /* Active */
   436  .ui.form .fields.error .field .ui.dropdown .menu .active.item,
   437  .ui.form .field.error .ui.dropdown .menu .active.item {
   438    background-color: #fdcfcf !important;
   439  }
   440  
   441  /*--------------------
   442      Checkbox Error
   443  ---------------------*/
   444  
   445  .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
   446  .ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
   447  .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
   448  .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {
   449    color: #d95c5c;
   450  }
   451  .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,
   452  .ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,
   453  .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,
   454  .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {
   455    background: #fff0f0;
   456    border-color: #dbb1b1;
   457  }
   458  .ui.form .fields.error .field .checkbox label:after,
   459  .ui.form .field.error .checkbox label:after,
   460  .ui.form .fields.error .field .checkbox .box:after,
   461  .ui.form .field.error .checkbox .box:after {
   462    color: #d95c5c;
   463  }
   464  
   465  /*--------------------
   466         Disabled
   467  ---------------------*/
   468  
   469  .ui.form .field :disabled,
   470  .ui.form .field.disabled {
   471    opacity: 0.5;
   472  }
   473  .ui.form .field.disabled label {
   474    opacity: 0.5;
   475  }
   476  .ui.form .field.disabled :disabled {
   477    opacity: 1;
   478  }
   479  
   480  /*--------------
   481      Loading
   482  ---------------*/
   483  
   484  .ui.loading.form {
   485    position: relative;
   486    cursor: default;
   487    point-events: none;
   488    text-shadow: none !important;
   489    color: transparent !important;
   490    -webkit-transition: all 0s linear;
   491            transition: all 0s linear;
   492    z-index: 100;
   493  }
   494  .ui.loading.form:before {
   495    position: absolute;
   496    content: '';
   497    top: 0%;
   498    left: 0%;
   499    background: rgba(255, 255, 255, 0.8);
   500    width: 100%;
   501    height: 100%;
   502    z-index: 100;
   503  }
   504  .ui.loading.form:after {
   505    position: absolute;
   506    content: '';
   507    top: 50%;
   508    left: 50%;
   509    margin: -1.5em 0em 0em -1.5em;
   510    width: 3em;
   511    height: 3em;
   512    -webkit-animation: form-spin 0.6s linear;
   513            animation: form-spin 0.6s linear;
   514    -webkit-animation-iteration-count: infinite;
   515            animation-iteration-count: infinite;
   516    border-radius: 500rem;
   517    border-color: #aaaaaa rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
   518    border-style: solid;
   519    border-width: 0.2em;
   520    box-shadow: 0px 0px 0px 1px transparent;
   521    visibility: visible;
   522    z-index: 101;
   523  }
   524  @-webkit-keyframes form-spin {
   525    from {
   526      -webkit-transform: rotate(0deg);
   527              transform: rotate(0deg);
   528    }
   529    to {
   530      -webkit-transform: rotate(360deg);
   531              transform: rotate(360deg);
   532    }
   533  }
   534  @keyframes form-spin {
   535    from {
   536      -webkit-transform: rotate(0deg);
   537              transform: rotate(0deg);
   538    }
   539    to {
   540      -webkit-transform: rotate(360deg);
   541              transform: rotate(360deg);
   542    }
   543  }
   544  
   545  
   546  /*******************************
   547           Element Types
   548  *******************************/
   549  
   550  
   551  /*--------------------
   552       Required Field
   553  ---------------------*/
   554  
   555  .ui.form .required.fields:not(.grouped) > .field > label:after,
   556  .ui.form .required.fields.grouped > label:after,
   557  .ui.form .required.field > label:after,
   558  .ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
   559  .ui.form .required.field > .checkbox:after {
   560    margin: -0.2em 0em 0em 0.2em;
   561    content: '*';
   562    color: #d95c5c;
   563  }
   564  .ui.form .required.fields:not(.grouped) > .field > label:after,
   565  .ui.form .required.fields.grouped > label:after,
   566  .ui.form .required.field > label:after {
   567    display: inline-block;
   568    vertical-align: top;
   569  }
   570  .ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
   571  .ui.form .required.field > .checkbox:after {
   572    position: absolute;
   573    top: 0%;
   574    left: 100%;
   575  }
   576  
   577  
   578  /*******************************
   579             Variations
   580  *******************************/
   581  
   582  
   583  /*--------------------
   584      Inverted Colors
   585  ---------------------*/
   586  
   587  .ui.inverted.form label,
   588  .ui.form .inverted.segment label,
   589  .ui.form .inverted.segment .ui.checkbox label,
   590  .ui.form .inverted.segment .ui.checkbox .box,
   591  .ui.inverted.form .ui.checkbox label,
   592  .ui.inverted.form .ui.checkbox .box {
   593    color: #ffffff;
   594  }
   595  
   596  /*--------------------
   597       Field Groups
   598  ---------------------*/
   599  
   600  
   601  /* Grouped Vertically */
   602  .ui.form .grouped.fields {
   603    margin: 0em 0em 1em;
   604  }
   605  .ui.form .grouped.fields:last-child {
   606    margin-bottom: 0em;
   607  }
   608  .ui.form .grouped.fields > label {
   609    font-size: 0.9285em;
   610  }
   611  .ui.form .grouped.fields .field {
   612    display: block;
   613    float: none;
   614    margin: 0.5em 0em;
   615    padding: 0em;
   616  }
   617  
   618  /*--------------------
   619          Fields
   620  ---------------------*/
   621  
   622  
   623  /* Split fields */
   624  .ui.form .fields {
   625    clear: both;
   626  }
   627  .ui.form .fields:after {
   628    content: ' ';
   629    display: block;
   630    clear: both;
   631    visibility: hidden;
   632    line-height: 0;
   633    height: 0;
   634  }
   635  .ui.form .fields > .field {
   636    clear: none;
   637    float: left;
   638    padding-left: 0.5em;
   639    padding-right: 0.5em;
   640  }
   641  .ui.form .fields > .field:first-child {
   642    border-left: none;
   643    box-shadow: none;
   644  }
   645  
   646  /* Other Combinations */
   647  .ui.form .two.fields > .fields,
   648  .ui.form .two.fields > .field {
   649    width: 50%;
   650  }
   651  .ui.form .three.fields > .fields,
   652  .ui.form .three.fields > .field {
   653    width: 33.33333333%;
   654  }
   655  .ui.form .four.fields > .fields,
   656  .ui.form .four.fields > .field {
   657    width: 25%;
   658  }
   659  .ui.form .five.fields > .fields,
   660  .ui.form .five.fields > .field {
   661    width: 20%;
   662  }
   663  .ui.form .six.fields > .fields,
   664  .ui.form .six.fields > .field {
   665    width: 16.66666667%;
   666  }
   667  .ui.form .seven.fields > .fields,
   668  .ui.form .seven.fields > .field {
   669    width: 14.28571429%;
   670  }
   671  .ui.form .eight.fields > .fields,
   672  .ui.form .eight.fields > .field {
   673    width: 12.5%;
   674  }
   675  .ui.form .nine.fields > .fields,
   676  .ui.form .nine.fields > .field {
   677    width: 11.11111111%;
   678  }
   679  .ui.form .ten.fields > .fields,
   680  .ui.form .ten.fields > .field {
   681    width: 10%;
   682  }
   683  
   684  /* Swap to full width on mobile */
   685  @media only screen and (max-width: 767px) {
   686    .ui.form .two.fields > .fields,
   687    .ui.form .two.fields > .field,
   688    .ui.form .three.fields > .fields,
   689    .ui.form .three.fields > .field,
   690    .ui.form .four.fields > .fields,
   691    .ui.form .four.fields > .field,
   692    .ui.form .five.fields > .fields,
   693    .ui.form .five.fields > .field,
   694    .ui.form .six.fields > .fields,
   695    .ui.form .six.fields > .field,
   696    .ui.form .seven.fields > .fields,
   697    .ui.form .seven.fields > .field,
   698    .ui.form .eight.fields > .fields,
   699    .ui.form .eight.fields > .field,
   700    .ui.form .nine.fields > .fields,
   701    .ui.form .nine.fields > .field,
   702    .ui.form .ten.fields > .fields,
   703    .ui.form .ten.fields > .field {
   704      width: 100% !important;
   705      margin: 0em 0em 1em;
   706      padding-left: 0%;
   707      padding-right: 0%;
   708    }
   709  }
   710  .ui.form .fields .field:first-child {
   711    padding-left: 0%;
   712  }
   713  .ui.form .fields .field:last-child {
   714    padding-right: 0%;
   715  }
   716  
   717  /* Sizing Combinations */
   718  .ui.form .fields .wide.field {
   719    width: 6.25%;
   720    padding-left: 0.5em;
   721    padding-right: 0.5em;
   722  }
   723  .ui.form .fields .wide.field:first-child {
   724    padding-left: 0%;
   725  }
   726  .ui.form .fields .wide.field:last-child {
   727    padding-right: 0%;
   728  }
   729  .ui.form .one.wide.field {
   730    width: 6.25% !important;
   731  }
   732  .ui.form .two.wide.field {
   733    width: 12.5% !important;
   734  }
   735  .ui.form .three.wide.field {
   736    width: 18.75% !important;
   737  }
   738  .ui.form .four.wide.field {
   739    width: 25% !important;
   740  }
   741  .ui.form .five.wide.field {
   742    width: 31.25% !important;
   743  }
   744  .ui.form .six.wide.field {
   745    width: 37.5% !important;
   746  }
   747  .ui.form .seven.wide.field {
   748    width: 43.75% !important;
   749  }
   750  .ui.form .eight.wide.field {
   751    width: 50% !important;
   752  }
   753  .ui.form .nine.wide.field {
   754    width: 56.25% !important;
   755  }
   756  .ui.form .ten.wide.field {
   757    width: 62.5% !important;
   758  }
   759  .ui.form .eleven.wide.field {
   760    width: 68.75% !important;
   761  }
   762  .ui.form .twelve.wide.field {
   763    width: 75% !important;
   764  }
   765  .ui.form .thirteen.wide.field {
   766    width: 81.25% !important;
   767  }
   768  .ui.form .fourteen.wide.field {
   769    width: 87.5% !important;
   770  }
   771  .ui.form .fifteen.wide.field {
   772    width: 93.75% !important;
   773  }
   774  .ui.form .sixteen.wide.field {
   775    width: 100% !important;
   776  }
   777  
   778  /* Swap to full width on mobile */
   779  @media only screen and (max-width: 767px) {
   780    .ui.form .two.fields > .fields,
   781    .ui.form .two.fields > .field,
   782    .ui.form .three.fields > .fields,
   783    .ui.form .three.fields > .field,
   784    .ui.form .four.fields > .fields,
   785    .ui.form .four.fields > .field,
   786    .ui.form .five.fields > .fields,
   787    .ui.form .five.fields > .field,
   788    .ui.form .fields > .two.wide.field,
   789    .ui.form .fields > .three.wide.field,
   790    .ui.form .fields > .four.wide.field,
   791    .ui.form .fields > .five.wide.field,
   792    .ui.form .fields > .six.wide.field,
   793    .ui.form .fields > .seven.wide.field,
   794    .ui.form .fields > .eight.wide.field,
   795    .ui.form .fields > .nine.wide.field,
   796    .ui.form .fields > .ten.wide.field,
   797    .ui.form .fields > .eleven.wide.field,
   798    .ui.form .fields > .twelve.wide.field,
   799    .ui.form .fields > .thirteen.wide.field,
   800    .ui.form .fields > .fourteen.wide.field,
   801    .ui.form .fields > .fifteen.wide.field,
   802    .ui.form .fields > .sixteen.wide.field {
   803      width: 100% !important;
   804      margin: 0em 0em 1em;
   805      padding-left: 0%;
   806      padding-right: 0%;
   807    }
   808  }
   809  
   810  /*--------------------
   811      Inline Fields
   812  ---------------------*/
   813  
   814  .ui.form .inline.fields {
   815    margin: 0em 0em 1em;
   816  }
   817  .ui.form .inline.fields .field {
   818    display: inline-block;
   819    float: none;
   820    margin: 0em 1em 0em 0em;
   821    padding: 0em;
   822  }
   823  .ui.form .inline.fields .field > label,
   824  .ui.form .inline.fields .field > p,
   825  .ui.form .inline.fields .field > input,
   826  .ui.form .inline.fields .field > .ui.input,
   827  .ui.form .inline.field > label,
   828  .ui.form .inline.field > p,
   829  .ui.form .inline.field > input,
   830  .ui.form .inline.field > .ui.input {
   831    display: inline-block;
   832    width: auto;
   833    margin-top: 0em;
   834    margin-bottom: 0em;
   835    vertical-align: middle;
   836    font-size: 0.9285em;
   837  }
   838  .ui.form .inline.fields .field > input,
   839  .ui.form .inline.fields .field > .ui.input,
   840  .ui.form .inline.field > input,
   841  .ui.form .inline.field > .ui.input {
   842    font-size: 0.9285em;
   843  }
   844  .ui.form .inline.fields .field > .ui.checkbox label {
   845    padding-left: 1.75em;
   846  }
   847  
   848  /* Label */
   849  .ui.form .inline.fields .field > :first-child,
   850  .ui.form .inline.field > :first-child {
   851    margin: 0em 0.2857rem 0em 0em;
   852  }
   853  .ui.form .inline.fields .field > :only-child,
   854  .ui.form .inline.field > :only-child {
   855    margin: 0em;
   856  }
   857  
   858  /*--------------------
   859          Sizes
   860  ---------------------*/
   861  
   862  
   863  /* Standard */
   864  .ui.small.form {
   865    font-size: 0.875em;
   866  }
   867  
   868  /* Medium */
   869  .ui.form {
   870    font-size: auto;
   871  }
   872  
   873  /* Large */
   874  .ui.large.form {
   875    font-size: 1.125em;
   876  }
   877  
   878  /* Huge */
   879  .ui.huge.form {
   880    font-size: 1.2em;
   881  }
   882  
   883  
   884  /*******************************
   885           Theme Overrides
   886  *******************************/
   887  
   888  
   889  
   890  /*******************************
   891           Site Overrides
   892  *******************************/
   893