form.css 51 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809
  1. /*!
  2. * # Fomantic-UI - Form
  3. * http://github.com/fomantic/Fomantic-UI/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Elements
  12. *******************************/
  13. /*--------------------
  14. Form
  15. ---------------------*/
  16. .ui.form {
  17. position: relative;
  18. max-width: 100%;
  19. }
  20. /*--------------------
  21. Content
  22. ---------------------*/
  23. .ui.form > p {
  24. margin: 1em 0;
  25. }
  26. /*--------------------
  27. Field
  28. ---------------------*/
  29. .ui.form .field {
  30. clear: both;
  31. margin: 0 0 1em;
  32. }
  33. .ui.form .fields .fields,
  34. .ui.form .field:last-child,
  35. .ui.form .fields:last-child .field {
  36. margin-bottom: 0;
  37. }
  38. .ui.form .fields .field {
  39. clear: both;
  40. margin: 0;
  41. }
  42. /*--------------------
  43. Labels
  44. ---------------------*/
  45. .ui.form .field > label {
  46. display: block;
  47. margin: 0 0 0.28571429rem 0;
  48. color: rgba(0, 0, 0, 0.87);
  49. font-size: 0.92857143em;
  50. font-weight: bold;
  51. text-transform: none;
  52. }
  53. /*--------------------
  54. Standard Inputs
  55. ---------------------*/
  56. .ui.form textarea,
  57. .ui.form input:not([type]),
  58. .ui.form input[type="date"],
  59. .ui.form input[type="datetime-local"],
  60. .ui.form input[type="email"],
  61. .ui.form input[type="number"],
  62. .ui.form input[type="password"],
  63. .ui.form input[type="search"],
  64. .ui.form input[type="tel"],
  65. .ui.form input[type="time"],
  66. .ui.form input[type="text"],
  67. .ui.form input[type="file"],
  68. .ui.form input[type="url"] {
  69. width: 100%;
  70. vertical-align: top;
  71. }
  72. /* Set max height on unusual input */
  73. .ui.form ::-webkit-datetime-edit,
  74. .ui.form ::-webkit-inner-spin-button {
  75. height: 1.21428571em;
  76. }
  77. .ui.form input:not([type]),
  78. .ui.form input[type="date"],
  79. .ui.form input[type="datetime-local"],
  80. .ui.form input[type="email"],
  81. .ui.form input[type="number"],
  82. .ui.form input[type="password"],
  83. .ui.form input[type="search"],
  84. .ui.form input[type="tel"],
  85. .ui.form input[type="time"],
  86. .ui.form input[type="text"],
  87. .ui.form input[type="file"],
  88. .ui.form input[type="url"] {
  89. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  90. margin: 0;
  91. outline: none;
  92. -webkit-appearance: none;
  93. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  94. line-height: 1.21428571em;
  95. padding: 0.67857143em 1em;
  96. font-size: 1em;
  97. background: #FFFFFF;
  98. border: 1px solid rgba(34, 36, 38, 0.15);
  99. color: rgba(0, 0, 0, 0.87);
  100. border-radius: 0.28571429rem;
  101. -webkit-box-shadow: 0 0 0 0 transparent inset;
  102. box-shadow: 0 0 0 0 transparent inset;
  103. -webkit-transition: color 0.1s ease, border-color 0.1s ease;
  104. transition: color 0.1s ease, border-color 0.1s ease;
  105. }
  106. /* Text Area */
  107. .ui.input textarea,
  108. .ui.form textarea {
  109. margin: 0;
  110. -webkit-appearance: none;
  111. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  112. padding: 0.78571429em 1em;
  113. background: #FFFFFF;
  114. border: 1px solid rgba(34, 36, 38, 0.15);
  115. outline: none;
  116. color: rgba(0, 0, 0, 0.87);
  117. border-radius: 0.28571429rem;
  118. -webkit-box-shadow: 0 0 0 0 transparent inset;
  119. box-shadow: 0 0 0 0 transparent inset;
  120. -webkit-transition: color 0.1s ease, border-color 0.1s ease;
  121. transition: color 0.1s ease, border-color 0.1s ease;
  122. font-size: 1em;
  123. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  124. line-height: 1.2857;
  125. resize: vertical;
  126. }
  127. .ui.form textarea:not([rows]) {
  128. height: 12em;
  129. min-height: 8em;
  130. max-height: 24em;
  131. }
  132. .ui.form textarea,
  133. .ui.form input[type="checkbox"] {
  134. vertical-align: top;
  135. }
  136. /*--------------------
  137. Checkbox margin
  138. ---------------------*/
  139. .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox {
  140. margin-top: 0.7em;
  141. }
  142. .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox {
  143. margin-top: 2.41428571em;
  144. }
  145. .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox {
  146. margin-top: 2.21428571em;
  147. }
  148. .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox {
  149. margin-top: 2.61428571em;
  150. }
  151. .ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
  152. margin-top: 0.6em;
  153. }
  154. .ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox {
  155. margin-top: 0.5em;
  156. }
  157. .ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox {
  158. margin-top: 0.7em;
  159. }
  160. /*--------------------
  161. Transparent
  162. ---------------------*/
  163. .ui.form .field .transparent.input:not(.icon) input,
  164. .ui.form .field input.transparent,
  165. .ui.form .field textarea.transparent {
  166. padding: 0.67857143em 1em;
  167. }
  168. .ui.form .field input.transparent,
  169. .ui.form .field textarea.transparent {
  170. border-color: transparent !important;
  171. background-color: transparent !important;
  172. -webkit-box-shadow: none !important;
  173. box-shadow: none !important;
  174. }
  175. /*--------------------------
  176. Input w/ attached Button
  177. ---------------------------*/
  178. .ui.form input.attached {
  179. width: auto;
  180. }
  181. /*--------------------
  182. Basic Select
  183. ---------------------*/
  184. .ui.form select {
  185. display: block;
  186. height: auto;
  187. width: 100%;
  188. background: #FFFFFF;
  189. border: 1px solid rgba(34, 36, 38, 0.15);
  190. border-radius: 0.28571429rem;
  191. -webkit-box-shadow: 0 0 0 0 transparent inset;
  192. box-shadow: 0 0 0 0 transparent inset;
  193. padding: 0.62em 1em;
  194. color: rgba(0, 0, 0, 0.87);
  195. -webkit-transition: color 0.1s ease, border-color 0.1s ease;
  196. transition: color 0.1s ease, border-color 0.1s ease;
  197. }
  198. /*--------------------
  199. Dropdown
  200. ---------------------*/
  201. /* Block */
  202. .ui.form .field > .selection.dropdown {
  203. min-width: auto;
  204. width: 100%;
  205. }
  206. .ui.form .field > .selection.dropdown > .dropdown.icon {
  207. float: right;
  208. }
  209. /* Inline */
  210. .ui.form .inline.fields .field > .selection.dropdown,
  211. .ui.form .inline.field > .selection.dropdown {
  212. width: auto;
  213. }
  214. .ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,
  215. .ui.form .inline.field > .selection.dropdown > .dropdown.icon {
  216. float: none;
  217. }
  218. /*--------------------
  219. UI Input
  220. ---------------------*/
  221. /* Block */
  222. .ui.form .field .ui.input,
  223. .ui.form .fields .field .ui.input,
  224. .ui.form .wide.field .ui.input {
  225. width: 100%;
  226. }
  227. /* Inline */
  228. .ui.form .inline.fields .field:not(.wide) .ui.input,
  229. .ui.form .inline.field:not(.wide) .ui.input {
  230. width: auto;
  231. vertical-align: middle;
  232. }
  233. /* Auto Input */
  234. .ui.form .fields .field .ui.input input,
  235. .ui.form .field .ui.input input {
  236. width: auto;
  237. }
  238. /* Full Width Input */
  239. .ui.form .ten.fields .ui.input input,
  240. .ui.form .nine.fields .ui.input input,
  241. .ui.form .eight.fields .ui.input input,
  242. .ui.form .seven.fields .ui.input input,
  243. .ui.form .six.fields .ui.input input,
  244. .ui.form .five.fields .ui.input input,
  245. .ui.form .four.fields .ui.input input,
  246. .ui.form .three.fields .ui.input input,
  247. .ui.form .two.fields .ui.input input,
  248. .ui.form .wide.field .ui.input input {
  249. -webkit-box-flex: 1;
  250. -ms-flex: 1 0 auto;
  251. flex: 1 0 auto;
  252. width: 0;
  253. }
  254. /*--------------------
  255. Types of Messages
  256. ---------------------*/
  257. .ui.form .error.message,
  258. .ui.form .error.message:empty {
  259. display: none;
  260. }
  261. .ui.form .info.message,
  262. .ui.form .info.message:empty {
  263. display: none;
  264. }
  265. .ui.form .success.message,
  266. .ui.form .success.message:empty {
  267. display: none;
  268. }
  269. .ui.form .warning.message,
  270. .ui.form .warning.message:empty {
  271. display: none;
  272. }
  273. /* Assumptions */
  274. .ui.form .message:first-child {
  275. margin-top: 0;
  276. }
  277. /*--------------------
  278. Validation Prompt
  279. ---------------------*/
  280. .ui.form .field .prompt.label {
  281. white-space: normal;
  282. background: #FFFFFF !important;
  283. border: 1px solid #E0B4B4 !important;
  284. color: #9F3A38 !important;
  285. }
  286. .ui.form .inline.fields .field .prompt,
  287. .ui.form .inline.field .prompt {
  288. vertical-align: top;
  289. margin: -0.25em 0 -0.5em 0.5em;
  290. }
  291. .ui.form .inline.fields .field .prompt:before,
  292. .ui.form .inline.field .prompt:before {
  293. border-width: 0 0 1px 1px;
  294. bottom: auto;
  295. right: auto;
  296. top: 50%;
  297. left: 0;
  298. }
  299. /*******************************
  300. States
  301. *******************************/
  302. /*--------------------
  303. Autofilled
  304. ---------------------*/
  305. .ui.form .field.field input:-webkit-autofill {
  306. -webkit-box-shadow: 0 0 0 100px #FFFFF0 inset !important;
  307. box-shadow: 0 0 0 100px #FFFFF0 inset !important;
  308. border-color: #E5DFA1 !important;
  309. }
  310. /* Focus */
  311. .ui.form .field.field input:-webkit-autofill:focus {
  312. -webkit-box-shadow: 0 0 0 100px #FFFFF0 inset !important;
  313. box-shadow: 0 0 0 100px #FFFFF0 inset !important;
  314. border-color: #D5C315 !important;
  315. }
  316. /*--------------------
  317. Placeholder
  318. ---------------------*/
  319. /* browsers require these rules separate */
  320. .ui.form ::-webkit-input-placeholder {
  321. color: rgba(191, 191, 191, 0.87);
  322. }
  323. .ui.form :-ms-input-placeholder {
  324. color: rgba(191, 191, 191, 0.87) !important;
  325. }
  326. .ui.form ::-moz-placeholder {
  327. color: rgba(191, 191, 191, 0.87);
  328. }
  329. .ui.form :focus::-webkit-input-placeholder {
  330. color: rgba(115, 115, 115, 0.87);
  331. }
  332. .ui.form :focus:-ms-input-placeholder {
  333. color: rgba(115, 115, 115, 0.87) !important;
  334. }
  335. .ui.form :focus::-moz-placeholder {
  336. color: rgba(115, 115, 115, 0.87);
  337. }
  338. /*--------------------
  339. Focus
  340. ---------------------*/
  341. .ui.form input:not([type]):focus,
  342. .ui.form input[type="date"]:focus,
  343. .ui.form input[type="datetime-local"]:focus,
  344. .ui.form input[type="email"]:focus,
  345. .ui.form input[type="number"]:focus,
  346. .ui.form input[type="password"]:focus,
  347. .ui.form input[type="search"]:focus,
  348. .ui.form input[type="tel"]:focus,
  349. .ui.form input[type="time"]:focus,
  350. .ui.form input[type="text"]:focus,
  351. .ui.form input[type="file"]:focus,
  352. .ui.form input[type="url"]:focus {
  353. color: rgba(0, 0, 0, 0.95);
  354. border-color: #85B7D9;
  355. border-radius: 0.28571429rem;
  356. background: #FFFFFF;
  357. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
  358. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
  359. }
  360. .ui.form .ui.action.input:not(.left) input:not([type]):focus,
  361. .ui.form .ui.action.input:not(.left) input[type="date"]:focus,
  362. .ui.form .ui.action.input:not(.left) input[type="datetime-local"]:focus,
  363. .ui.form .ui.action.input:not(.left) input[type="email"]:focus,
  364. .ui.form .ui.action.input:not(.left) input[type="number"]:focus,
  365. .ui.form .ui.action.input:not(.left) input[type="password"]:focus,
  366. .ui.form .ui.action.input:not(.left) input[type="search"]:focus,
  367. .ui.form .ui.action.input:not(.left) input[type="tel"]:focus,
  368. .ui.form .ui.action.input:not(.left) input[type="time"]:focus,
  369. .ui.form .ui.action.input:not(.left) input[type="text"]:focus,
  370. .ui.form .ui.action.input:not(.left) input[type="file"]:focus,
  371. .ui.form .ui.action.input:not(.left) input[type="url"]:focus {
  372. border-top-right-radius: 0;
  373. border-bottom-right-radius: 0;
  374. }
  375. .ui.form .ui.action.input.left input:not([type]),
  376. .ui.form .ui.action.input.left input[type="date"],
  377. .ui.form .ui.action.input.left input[type="datetime-local"],
  378. .ui.form .ui.action.input.left input[type="email"],
  379. .ui.form .ui.action.input.left input[type="number"],
  380. .ui.form .ui.action.input.left input[type="password"],
  381. .ui.form .ui.action.input.left input[type="search"],
  382. .ui.form .ui.action.input.left input[type="tel"],
  383. .ui.form .ui.action.input.left input[type="time"],
  384. .ui.form .ui.action.input.left input[type="text"],
  385. .ui.form .ui.action.input.left input[type="file"],
  386. .ui.form .ui.action.input.left input[type="url"] {
  387. border-bottom-left-radius: 0;
  388. border-top-left-radius: 0;
  389. }
  390. .ui.form textarea:focus {
  391. color: rgba(0, 0, 0, 0.95);
  392. border-color: #85B7D9;
  393. border-radius: 0.28571429rem;
  394. background: #FFFFFF;
  395. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
  396. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
  397. -webkit-appearance: none;
  398. }
  399. /*--------------------
  400. States
  401. ---------------------*/
  402. /* On Form */
  403. .ui.form.error .error.message:not(:empty) {
  404. display: block;
  405. }
  406. .ui.form.error .compact.error.message:not(:empty) {
  407. display: inline-block;
  408. }
  409. .ui.form.error .icon.error.message:not(:empty) {
  410. display: -webkit-box;
  411. display: -ms-flexbox;
  412. display: flex;
  413. }
  414. /* On Field(s) */
  415. .ui.form .fields.error .error.message:not(:empty),
  416. .ui.form .field.error .error.message:not(:empty) {
  417. display: block;
  418. }
  419. .ui.form .fields.error .compact.error.message:not(:empty),
  420. .ui.form .field.error .compact.error.message:not(:empty) {
  421. display: inline-block;
  422. }
  423. .ui.form .fields.error .icon.error.message:not(:empty),
  424. .ui.form .field.error .icon.error.message:not(:empty) {
  425. display: -webkit-box;
  426. display: -ms-flexbox;
  427. display: flex;
  428. }
  429. .ui.ui.form .fields.error .field label,
  430. .ui.ui.form .field.error label,
  431. .ui.ui.form .fields.error .field .input,
  432. .ui.ui.form .field.error .input {
  433. color: #9F3A38;
  434. }
  435. .ui.form .fields.error .field .corner.label,
  436. .ui.form .field.error .corner.label {
  437. border-color: #9F3A38;
  438. color: #FFFFFF;
  439. }
  440. .ui.form .fields.error .field textarea,
  441. .ui.form .fields.error .field select,
  442. .ui.form .fields.error .field input:not([type]),
  443. .ui.form .fields.error .field input[type="date"],
  444. .ui.form .fields.error .field input[type="datetime-local"],
  445. .ui.form .fields.error .field input[type="email"],
  446. .ui.form .fields.error .field input[type="number"],
  447. .ui.form .fields.error .field input[type="password"],
  448. .ui.form .fields.error .field input[type="search"],
  449. .ui.form .fields.error .field input[type="tel"],
  450. .ui.form .fields.error .field input[type="time"],
  451. .ui.form .fields.error .field input[type="text"],
  452. .ui.form .fields.error .field input[type="file"],
  453. .ui.form .fields.error .field input[type="url"],
  454. .ui.form .field.error textarea,
  455. .ui.form .field.error select,
  456. .ui.form .field.error input:not([type]),
  457. .ui.form .field.error input[type="date"],
  458. .ui.form .field.error input[type="datetime-local"],
  459. .ui.form .field.error input[type="email"],
  460. .ui.form .field.error input[type="number"],
  461. .ui.form .field.error input[type="password"],
  462. .ui.form .field.error input[type="search"],
  463. .ui.form .field.error input[type="tel"],
  464. .ui.form .field.error input[type="time"],
  465. .ui.form .field.error input[type="text"],
  466. .ui.form .field.error input[type="file"],
  467. .ui.form .field.error input[type="url"] {
  468. color: #9F3A38;
  469. background: #FFF6F6;
  470. border-color: #E0B4B4;
  471. border-radius: '';
  472. -webkit-box-shadow: none;
  473. box-shadow: none;
  474. }
  475. .ui.form .field.error textarea:focus,
  476. .ui.form .field.error select:focus,
  477. .ui.form .field.error input:not([type]):focus,
  478. .ui.form .field.error input[type="date"]:focus,
  479. .ui.form .field.error input[type="datetime-local"]:focus,
  480. .ui.form .field.error input[type="email"]:focus,
  481. .ui.form .field.error input[type="number"]:focus,
  482. .ui.form .field.error input[type="password"]:focus,
  483. .ui.form .field.error input[type="search"]:focus,
  484. .ui.form .field.error input[type="tel"]:focus,
  485. .ui.form .field.error input[type="time"]:focus,
  486. .ui.form .field.error input[type="text"]:focus,
  487. .ui.form .field.error input[type="file"]:focus,
  488. .ui.form .field.error input[type="url"]:focus {
  489. background: #FFF6F6;
  490. border-color: #E0B4B4;
  491. color: #9F3A38;
  492. -webkit-box-shadow: none;
  493. box-shadow: none;
  494. }
  495. /* Preserve Native Select Stylings */
  496. .ui.form .field.error select {
  497. -webkit-appearance: menulist-button;
  498. }
  499. /*------------------
  500. Input State
  501. --------------------*/
  502. /* Transparent */
  503. .ui.form .field.error .transparent.input input,
  504. .ui.form .field.error .transparent.input textarea,
  505. .ui.form .field.error input.transparent,
  506. .ui.form .field.error textarea.transparent {
  507. background-color: #FFF6F6 !important;
  508. color: #9F3A38 !important;
  509. }
  510. /* Autofilled */
  511. .ui.form .error.error input:-webkit-autofill {
  512. -webkit-box-shadow: 0 0 0 100px #FFFAF0 inset !important;
  513. box-shadow: 0 0 0 100px #FFFAF0 inset !important;
  514. border-color: #E0B4B4 !important;
  515. }
  516. /* Placeholder */
  517. .ui.form .error ::-webkit-input-placeholder {
  518. color: #e7bdbc;
  519. }
  520. .ui.form .error :-ms-input-placeholder {
  521. color: #e7bdbc !important;
  522. }
  523. .ui.form .error ::-moz-placeholder {
  524. color: #e7bdbc;
  525. }
  526. .ui.form .error :focus::-webkit-input-placeholder {
  527. color: #da9796;
  528. }
  529. .ui.form .error :focus:-ms-input-placeholder {
  530. color: #da9796 !important;
  531. }
  532. .ui.form .error :focus::-moz-placeholder {
  533. color: #da9796;
  534. }
  535. /*------------------
  536. Dropdown State
  537. --------------------*/
  538. .ui.form .fields.error .field .ui.dropdown,
  539. .ui.form .fields.error .field .ui.dropdown .item,
  540. .ui.form .field.error .ui.dropdown,
  541. .ui.form .field.error .ui.dropdown .text,
  542. .ui.form .field.error .ui.dropdown .item {
  543. background: #FFF6F6;
  544. color: #9F3A38;
  545. }
  546. .ui.form .fields.error .field .ui.dropdown,
  547. .ui.form .field.error .ui.dropdown {
  548. border-color: #E0B4B4 !important;
  549. }
  550. .ui.form .fields.error .field .ui.dropdown:hover,
  551. .ui.form .field.error .ui.dropdown:hover {
  552. border-color: #E0B4B4 !important;
  553. }
  554. .ui.form .fields.error .field .ui.dropdown:hover .menu,
  555. .ui.form .field.error .ui.dropdown:hover .menu {
  556. border-color: #E0B4B4;
  557. }
  558. .ui.form .fields.error .field .ui.multiple.selection.dropdown > .label,
  559. .ui.form .field.error .ui.multiple.selection.dropdown > .label {
  560. background-color: #EACBCB;
  561. color: #9F3A38;
  562. }
  563. /* Hover */
  564. .ui.form .fields.error .field .ui.dropdown .menu .item:hover,
  565. .ui.form .field.error .ui.dropdown .menu .item:hover {
  566. background-color: #FBE7E7;
  567. }
  568. /* Selected */
  569. .ui.form .fields.error .field .ui.dropdown .menu .selected.item,
  570. .ui.form .field.error .ui.dropdown .menu .selected.item {
  571. background-color: #FBE7E7;
  572. }
  573. /* Active */
  574. .ui.form .fields.error .field .ui.dropdown .menu .active.item,
  575. .ui.form .field.error .ui.dropdown .menu .active.item {
  576. background-color: #FDCFCF !important;
  577. }
  578. /*--------------------
  579. Checkbox State
  580. ---------------------*/
  581. .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
  582. .ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
  583. .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
  584. .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {
  585. color: #9F3A38;
  586. }
  587. .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,
  588. .ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,
  589. .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,
  590. .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {
  591. background: #FFF6F6;
  592. border-color: #E0B4B4;
  593. }
  594. .ui.form .fields.error .field .checkbox label:after,
  595. .ui.form .field.error .checkbox label:after,
  596. .ui.form .fields.error .field .checkbox .box:after,
  597. .ui.form .field.error .checkbox .box:after {
  598. color: #9F3A38;
  599. }
  600. /* On Form */
  601. .ui.form.info .info.message:not(:empty) {
  602. display: block;
  603. }
  604. .ui.form.info .compact.info.message:not(:empty) {
  605. display: inline-block;
  606. }
  607. .ui.form.info .icon.info.message:not(:empty) {
  608. display: -webkit-box;
  609. display: -ms-flexbox;
  610. display: flex;
  611. }
  612. /* On Field(s) */
  613. .ui.form .fields.info .info.message:not(:empty),
  614. .ui.form .field.info .info.message:not(:empty) {
  615. display: block;
  616. }
  617. .ui.form .fields.info .compact.info.message:not(:empty),
  618. .ui.form .field.info .compact.info.message:not(:empty) {
  619. display: inline-block;
  620. }
  621. .ui.form .fields.info .icon.info.message:not(:empty),
  622. .ui.form .field.info .icon.info.message:not(:empty) {
  623. display: -webkit-box;
  624. display: -ms-flexbox;
  625. display: flex;
  626. }
  627. .ui.ui.form .fields.info .field label,
  628. .ui.ui.form .field.info label,
  629. .ui.ui.form .fields.info .field .input,
  630. .ui.ui.form .field.info .input {
  631. color: #276F86;
  632. }
  633. .ui.form .fields.info .field .corner.label,
  634. .ui.form .field.info .corner.label {
  635. border-color: #276F86;
  636. color: #FFFFFF;
  637. }
  638. .ui.form .fields.info .field textarea,
  639. .ui.form .fields.info .field select,
  640. .ui.form .fields.info .field input:not([type]),
  641. .ui.form .fields.info .field input[type="date"],
  642. .ui.form .fields.info .field input[type="datetime-local"],
  643. .ui.form .fields.info .field input[type="email"],
  644. .ui.form .fields.info .field input[type="number"],
  645. .ui.form .fields.info .field input[type="password"],
  646. .ui.form .fields.info .field input[type="search"],
  647. .ui.form .fields.info .field input[type="tel"],
  648. .ui.form .fields.info .field input[type="time"],
  649. .ui.form .fields.info .field input[type="text"],
  650. .ui.form .fields.info .field input[type="file"],
  651. .ui.form .fields.info .field input[type="url"],
  652. .ui.form .field.info textarea,
  653. .ui.form .field.info select,
  654. .ui.form .field.info input:not([type]),
  655. .ui.form .field.info input[type="date"],
  656. .ui.form .field.info input[type="datetime-local"],
  657. .ui.form .field.info input[type="email"],
  658. .ui.form .field.info input[type="number"],
  659. .ui.form .field.info input[type="password"],
  660. .ui.form .field.info input[type="search"],
  661. .ui.form .field.info input[type="tel"],
  662. .ui.form .field.info input[type="time"],
  663. .ui.form .field.info input[type="text"],
  664. .ui.form .field.info input[type="file"],
  665. .ui.form .field.info input[type="url"] {
  666. color: #276F86;
  667. background: #F8FFFF;
  668. border-color: #A9D5DE;
  669. border-radius: '';
  670. -webkit-box-shadow: none;
  671. box-shadow: none;
  672. }
  673. .ui.form .field.info textarea:focus,
  674. .ui.form .field.info select:focus,
  675. .ui.form .field.info input:not([type]):focus,
  676. .ui.form .field.info input[type="date"]:focus,
  677. .ui.form .field.info input[type="datetime-local"]:focus,
  678. .ui.form .field.info input[type="email"]:focus,
  679. .ui.form .field.info input[type="number"]:focus,
  680. .ui.form .field.info input[type="password"]:focus,
  681. .ui.form .field.info input[type="search"]:focus,
  682. .ui.form .field.info input[type="tel"]:focus,
  683. .ui.form .field.info input[type="time"]:focus,
  684. .ui.form .field.info input[type="text"]:focus,
  685. .ui.form .field.info input[type="file"]:focus,
  686. .ui.form .field.info input[type="url"]:focus {
  687. background: #F8FFFF;
  688. border-color: #A9D5DE;
  689. color: #276F86;
  690. -webkit-box-shadow: none;
  691. box-shadow: none;
  692. }
  693. /* Preserve Native Select Stylings */
  694. .ui.form .field.info select {
  695. -webkit-appearance: menulist-button;
  696. }
  697. /*------------------
  698. Input State
  699. --------------------*/
  700. /* Transparent */
  701. .ui.form .field.info .transparent.input input,
  702. .ui.form .field.info .transparent.input textarea,
  703. .ui.form .field.info input.transparent,
  704. .ui.form .field.info textarea.transparent {
  705. background-color: #F8FFFF !important;
  706. color: #276F86 !important;
  707. }
  708. /* Autofilled */
  709. .ui.form .info.info input:-webkit-autofill {
  710. -webkit-box-shadow: 0 0 0 100px #F0FAFF inset !important;
  711. box-shadow: 0 0 0 100px #F0FAFF inset !important;
  712. border-color: #b3e0e0 !important;
  713. }
  714. /* Placeholder */
  715. .ui.form .info ::-webkit-input-placeholder {
  716. color: #98cfe1;
  717. }
  718. .ui.form .info :-ms-input-placeholder {
  719. color: #98cfe1 !important;
  720. }
  721. .ui.form .info ::-moz-placeholder {
  722. color: #98cfe1;
  723. }
  724. .ui.form .info :focus::-webkit-input-placeholder {
  725. color: #70bdd6;
  726. }
  727. .ui.form .info :focus:-ms-input-placeholder {
  728. color: #70bdd6 !important;
  729. }
  730. .ui.form .info :focus::-moz-placeholder {
  731. color: #70bdd6;
  732. }
  733. /*------------------
  734. Dropdown State
  735. --------------------*/
  736. .ui.form .fields.info .field .ui.dropdown,
  737. .ui.form .fields.info .field .ui.dropdown .item,
  738. .ui.form .field.info .ui.dropdown,
  739. .ui.form .field.info .ui.dropdown .text,
  740. .ui.form .field.info .ui.dropdown .item {
  741. background: #F8FFFF;
  742. color: #276F86;
  743. }
  744. .ui.form .fields.info .field .ui.dropdown,
  745. .ui.form .field.info .ui.dropdown {
  746. border-color: #A9D5DE !important;
  747. }
  748. .ui.form .fields.info .field .ui.dropdown:hover,
  749. .ui.form .field.info .ui.dropdown:hover {
  750. border-color: #A9D5DE !important;
  751. }
  752. .ui.form .fields.info .field .ui.dropdown:hover .menu,
  753. .ui.form .field.info .ui.dropdown:hover .menu {
  754. border-color: #A9D5DE;
  755. }
  756. .ui.form .fields.info .field .ui.multiple.selection.dropdown > .label,
  757. .ui.form .field.info .ui.multiple.selection.dropdown > .label {
  758. background-color: #cce3ea;
  759. color: #276F86;
  760. }
  761. /* Hover */
  762. .ui.form .fields.info .field .ui.dropdown .menu .item:hover,
  763. .ui.form .field.info .ui.dropdown .menu .item:hover {
  764. background-color: #e9f2fb;
  765. }
  766. /* Selected */
  767. .ui.form .fields.info .field .ui.dropdown .menu .selected.item,
  768. .ui.form .field.info .ui.dropdown .menu .selected.item {
  769. background-color: #e9f2fb;
  770. }
  771. /* Active */
  772. .ui.form .fields.info .field .ui.dropdown .menu .active.item,
  773. .ui.form .field.info .ui.dropdown .menu .active.item {
  774. background-color: #cef1fd !important;
  775. }
  776. /*--------------------
  777. Checkbox State
  778. ---------------------*/
  779. .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label,
  780. .ui.form .field.info .checkbox:not(.toggle):not(.slider) label,
  781. .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box,
  782. .ui.form .field.info .checkbox:not(.toggle):not(.slider) .box {
  783. color: #276F86;
  784. }
  785. .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label:before,
  786. .ui.form .field.info .checkbox:not(.toggle):not(.slider) label:before,
  787. .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box:before,
  788. .ui.form .field.info .checkbox:not(.toggle):not(.slider) .box:before {
  789. background: #F8FFFF;
  790. border-color: #A9D5DE;
  791. }
  792. .ui.form .fields.info .field .checkbox label:after,
  793. .ui.form .field.info .checkbox label:after,
  794. .ui.form .fields.info .field .checkbox .box:after,
  795. .ui.form .field.info .checkbox .box:after {
  796. color: #276F86;
  797. }
  798. /* On Form */
  799. .ui.form.success .success.message:not(:empty) {
  800. display: block;
  801. }
  802. .ui.form.success .compact.success.message:not(:empty) {
  803. display: inline-block;
  804. }
  805. .ui.form.success .icon.success.message:not(:empty) {
  806. display: -webkit-box;
  807. display: -ms-flexbox;
  808. display: flex;
  809. }
  810. /* On Field(s) */
  811. .ui.form .fields.success .success.message:not(:empty),
  812. .ui.form .field.success .success.message:not(:empty) {
  813. display: block;
  814. }
  815. .ui.form .fields.success .compact.success.message:not(:empty),
  816. .ui.form .field.success .compact.success.message:not(:empty) {
  817. display: inline-block;
  818. }
  819. .ui.form .fields.success .icon.success.message:not(:empty),
  820. .ui.form .field.success .icon.success.message:not(:empty) {
  821. display: -webkit-box;
  822. display: -ms-flexbox;
  823. display: flex;
  824. }
  825. .ui.ui.form .fields.success .field label,
  826. .ui.ui.form .field.success label,
  827. .ui.ui.form .fields.success .field .input,
  828. .ui.ui.form .field.success .input {
  829. color: #2C662D;
  830. }
  831. .ui.form .fields.success .field .corner.label,
  832. .ui.form .field.success .corner.label {
  833. border-color: #2C662D;
  834. color: #FFFFFF;
  835. }
  836. .ui.form .fields.success .field textarea,
  837. .ui.form .fields.success .field select,
  838. .ui.form .fields.success .field input:not([type]),
  839. .ui.form .fields.success .field input[type="date"],
  840. .ui.form .fields.success .field input[type="datetime-local"],
  841. .ui.form .fields.success .field input[type="email"],
  842. .ui.form .fields.success .field input[type="number"],
  843. .ui.form .fields.success .field input[type="password"],
  844. .ui.form .fields.success .field input[type="search"],
  845. .ui.form .fields.success .field input[type="tel"],
  846. .ui.form .fields.success .field input[type="time"],
  847. .ui.form .fields.success .field input[type="text"],
  848. .ui.form .fields.success .field input[type="file"],
  849. .ui.form .fields.success .field input[type="url"],
  850. .ui.form .field.success textarea,
  851. .ui.form .field.success select,
  852. .ui.form .field.success input:not([type]),
  853. .ui.form .field.success input[type="date"],
  854. .ui.form .field.success input[type="datetime-local"],
  855. .ui.form .field.success input[type="email"],
  856. .ui.form .field.success input[type="number"],
  857. .ui.form .field.success input[type="password"],
  858. .ui.form .field.success input[type="search"],
  859. .ui.form .field.success input[type="tel"],
  860. .ui.form .field.success input[type="time"],
  861. .ui.form .field.success input[type="text"],
  862. .ui.form .field.success input[type="file"],
  863. .ui.form .field.success input[type="url"] {
  864. color: #2C662D;
  865. background: #FCFFF5;
  866. border-color: #A3C293;
  867. border-radius: '';
  868. -webkit-box-shadow: none;
  869. box-shadow: none;
  870. }
  871. .ui.form .field.success textarea:focus,
  872. .ui.form .field.success select:focus,
  873. .ui.form .field.success input:not([type]):focus,
  874. .ui.form .field.success input[type="date"]:focus,
  875. .ui.form .field.success input[type="datetime-local"]:focus,
  876. .ui.form .field.success input[type="email"]:focus,
  877. .ui.form .field.success input[type="number"]:focus,
  878. .ui.form .field.success input[type="password"]:focus,
  879. .ui.form .field.success input[type="search"]:focus,
  880. .ui.form .field.success input[type="tel"]:focus,
  881. .ui.form .field.success input[type="time"]:focus,
  882. .ui.form .field.success input[type="text"]:focus,
  883. .ui.form .field.success input[type="file"]:focus,
  884. .ui.form .field.success input[type="url"]:focus {
  885. background: #FCFFF5;
  886. border-color: #A3C293;
  887. color: #2C662D;
  888. -webkit-box-shadow: none;
  889. box-shadow: none;
  890. }
  891. /* Preserve Native Select Stylings */
  892. .ui.form .field.success select {
  893. -webkit-appearance: menulist-button;
  894. }
  895. /*------------------
  896. Input State
  897. --------------------*/
  898. /* Transparent */
  899. .ui.form .field.success .transparent.input input,
  900. .ui.form .field.success .transparent.input textarea,
  901. .ui.form .field.success input.transparent,
  902. .ui.form .field.success textarea.transparent {
  903. background-color: #FCFFF5 !important;
  904. color: #2C662D !important;
  905. }
  906. /* Autofilled */
  907. .ui.form .success.success input:-webkit-autofill {
  908. -webkit-box-shadow: 0 0 0 100px #F0FFF0 inset !important;
  909. box-shadow: 0 0 0 100px #F0FFF0 inset !important;
  910. border-color: #bee0b3 !important;
  911. }
  912. /* Placeholder */
  913. .ui.form .success ::-webkit-input-placeholder {
  914. color: #8fcf90;
  915. }
  916. .ui.form .success :-ms-input-placeholder {
  917. color: #8fcf90 !important;
  918. }
  919. .ui.form .success ::-moz-placeholder {
  920. color: #8fcf90;
  921. }
  922. .ui.form .success :focus::-webkit-input-placeholder {
  923. color: #6cbf6d;
  924. }
  925. .ui.form .success :focus:-ms-input-placeholder {
  926. color: #6cbf6d !important;
  927. }
  928. .ui.form .success :focus::-moz-placeholder {
  929. color: #6cbf6d;
  930. }
  931. /*------------------
  932. Dropdown State
  933. --------------------*/
  934. .ui.form .fields.success .field .ui.dropdown,
  935. .ui.form .fields.success .field .ui.dropdown .item,
  936. .ui.form .field.success .ui.dropdown,
  937. .ui.form .field.success .ui.dropdown .text,
  938. .ui.form .field.success .ui.dropdown .item {
  939. background: #FCFFF5;
  940. color: #2C662D;
  941. }
  942. .ui.form .fields.success .field .ui.dropdown,
  943. .ui.form .field.success .ui.dropdown {
  944. border-color: #A3C293 !important;
  945. }
  946. .ui.form .fields.success .field .ui.dropdown:hover,
  947. .ui.form .field.success .ui.dropdown:hover {
  948. border-color: #A3C293 !important;
  949. }
  950. .ui.form .fields.success .field .ui.dropdown:hover .menu,
  951. .ui.form .field.success .ui.dropdown:hover .menu {
  952. border-color: #A3C293;
  953. }
  954. .ui.form .fields.success .field .ui.multiple.selection.dropdown > .label,
  955. .ui.form .field.success .ui.multiple.selection.dropdown > .label {
  956. background-color: #cceacc;
  957. color: #2C662D;
  958. }
  959. /* Hover */
  960. .ui.form .fields.success .field .ui.dropdown .menu .item:hover,
  961. .ui.form .field.success .ui.dropdown .menu .item:hover {
  962. background-color: #e9fbe9;
  963. }
  964. /* Selected */
  965. .ui.form .fields.success .field .ui.dropdown .menu .selected.item,
  966. .ui.form .field.success .ui.dropdown .menu .selected.item {
  967. background-color: #e9fbe9;
  968. }
  969. /* Active */
  970. .ui.form .fields.success .field .ui.dropdown .menu .active.item,
  971. .ui.form .field.success .ui.dropdown .menu .active.item {
  972. background-color: #dafdce !important;
  973. }
  974. /*--------------------
  975. Checkbox State
  976. ---------------------*/
  977. .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label,
  978. .ui.form .field.success .checkbox:not(.toggle):not(.slider) label,
  979. .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box,
  980. .ui.form .field.success .checkbox:not(.toggle):not(.slider) .box {
  981. color: #2C662D;
  982. }
  983. .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label:before,
  984. .ui.form .field.success .checkbox:not(.toggle):not(.slider) label:before,
  985. .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box:before,
  986. .ui.form .field.success .checkbox:not(.toggle):not(.slider) .box:before {
  987. background: #FCFFF5;
  988. border-color: #A3C293;
  989. }
  990. .ui.form .fields.success .field .checkbox label:after,
  991. .ui.form .field.success .checkbox label:after,
  992. .ui.form .fields.success .field .checkbox .box:after,
  993. .ui.form .field.success .checkbox .box:after {
  994. color: #2C662D;
  995. }
  996. /* On Form */
  997. .ui.form.warning .warning.message:not(:empty) {
  998. display: block;
  999. }
  1000. .ui.form.warning .compact.warning.message:not(:empty) {
  1001. display: inline-block;
  1002. }
  1003. .ui.form.warning .icon.warning.message:not(:empty) {
  1004. display: -webkit-box;
  1005. display: -ms-flexbox;
  1006. display: flex;
  1007. }
  1008. /* On Field(s) */
  1009. .ui.form .fields.warning .warning.message:not(:empty),
  1010. .ui.form .field.warning .warning.message:not(:empty) {
  1011. display: block;
  1012. }
  1013. .ui.form .fields.warning .compact.warning.message:not(:empty),
  1014. .ui.form .field.warning .compact.warning.message:not(:empty) {
  1015. display: inline-block;
  1016. }
  1017. .ui.form .fields.warning .icon.warning.message:not(:empty),
  1018. .ui.form .field.warning .icon.warning.message:not(:empty) {
  1019. display: -webkit-box;
  1020. display: -ms-flexbox;
  1021. display: flex;
  1022. }
  1023. .ui.ui.form .fields.warning .field label,
  1024. .ui.ui.form .field.warning label,
  1025. .ui.ui.form .fields.warning .field .input,
  1026. .ui.ui.form .field.warning .input {
  1027. color: #573A08;
  1028. }
  1029. .ui.form .fields.warning .field .corner.label,
  1030. .ui.form .field.warning .corner.label {
  1031. border-color: #573A08;
  1032. color: #FFFFFF;
  1033. }
  1034. .ui.form .fields.warning .field textarea,
  1035. .ui.form .fields.warning .field select,
  1036. .ui.form .fields.warning .field input:not([type]),
  1037. .ui.form .fields.warning .field input[type="date"],
  1038. .ui.form .fields.warning .field input[type="datetime-local"],
  1039. .ui.form .fields.warning .field input[type="email"],
  1040. .ui.form .fields.warning .field input[type="number"],
  1041. .ui.form .fields.warning .field input[type="password"],
  1042. .ui.form .fields.warning .field input[type="search"],
  1043. .ui.form .fields.warning .field input[type="tel"],
  1044. .ui.form .fields.warning .field input[type="time"],
  1045. .ui.form .fields.warning .field input[type="text"],
  1046. .ui.form .fields.warning .field input[type="file"],
  1047. .ui.form .fields.warning .field input[type="url"],
  1048. .ui.form .field.warning textarea,
  1049. .ui.form .field.warning select,
  1050. .ui.form .field.warning input:not([type]),
  1051. .ui.form .field.warning input[type="date"],
  1052. .ui.form .field.warning input[type="datetime-local"],
  1053. .ui.form .field.warning input[type="email"],
  1054. .ui.form .field.warning input[type="number"],
  1055. .ui.form .field.warning input[type="password"],
  1056. .ui.form .field.warning input[type="search"],
  1057. .ui.form .field.warning input[type="tel"],
  1058. .ui.form .field.warning input[type="time"],
  1059. .ui.form .field.warning input[type="text"],
  1060. .ui.form .field.warning input[type="file"],
  1061. .ui.form .field.warning input[type="url"] {
  1062. color: #573A08;
  1063. background: #FFFAF3;
  1064. border-color: #C9BA9B;
  1065. border-radius: '';
  1066. -webkit-box-shadow: none;
  1067. box-shadow: none;
  1068. }
  1069. .ui.form .field.warning textarea:focus,
  1070. .ui.form .field.warning select:focus,
  1071. .ui.form .field.warning input:not([type]):focus,
  1072. .ui.form .field.warning input[type="date"]:focus,
  1073. .ui.form .field.warning input[type="datetime-local"]:focus,
  1074. .ui.form .field.warning input[type="email"]:focus,
  1075. .ui.form .field.warning input[type="number"]:focus,
  1076. .ui.form .field.warning input[type="password"]:focus,
  1077. .ui.form .field.warning input[type="search"]:focus,
  1078. .ui.form .field.warning input[type="tel"]:focus,
  1079. .ui.form .field.warning input[type="time"]:focus,
  1080. .ui.form .field.warning input[type="text"]:focus,
  1081. .ui.form .field.warning input[type="file"]:focus,
  1082. .ui.form .field.warning input[type="url"]:focus {
  1083. background: #FFFAF3;
  1084. border-color: #C9BA9B;
  1085. color: #573A08;
  1086. -webkit-box-shadow: none;
  1087. box-shadow: none;
  1088. }
  1089. /* Preserve Native Select Stylings */
  1090. .ui.form .field.warning select {
  1091. -webkit-appearance: menulist-button;
  1092. }
  1093. /*------------------
  1094. Input State
  1095. --------------------*/
  1096. /* Transparent */
  1097. .ui.form .field.warning .transparent.input input,
  1098. .ui.form .field.warning .transparent.input textarea,
  1099. .ui.form .field.warning input.transparent,
  1100. .ui.form .field.warning textarea.transparent {
  1101. background-color: #FFFAF3 !important;
  1102. color: #573A08 !important;
  1103. }
  1104. /* Autofilled */
  1105. .ui.form .warning.warning input:-webkit-autofill {
  1106. -webkit-box-shadow: 0 0 0 100px #FFFFe0 inset !important;
  1107. box-shadow: 0 0 0 100px #FFFFe0 inset !important;
  1108. border-color: #e0e0b3 !important;
  1109. }
  1110. /* Placeholder */
  1111. .ui.form .warning ::-webkit-input-placeholder {
  1112. color: #edad3e;
  1113. }
  1114. .ui.form .warning :-ms-input-placeholder {
  1115. color: #edad3e !important;
  1116. }
  1117. .ui.form .warning ::-moz-placeholder {
  1118. color: #edad3e;
  1119. }
  1120. .ui.form .warning :focus::-webkit-input-placeholder {
  1121. color: #e39715;
  1122. }
  1123. .ui.form .warning :focus:-ms-input-placeholder {
  1124. color: #e39715 !important;
  1125. }
  1126. .ui.form .warning :focus::-moz-placeholder {
  1127. color: #e39715;
  1128. }
  1129. /*------------------
  1130. Dropdown State
  1131. --------------------*/
  1132. .ui.form .fields.warning .field .ui.dropdown,
  1133. .ui.form .fields.warning .field .ui.dropdown .item,
  1134. .ui.form .field.warning .ui.dropdown,
  1135. .ui.form .field.warning .ui.dropdown .text,
  1136. .ui.form .field.warning .ui.dropdown .item {
  1137. background: #FFFAF3;
  1138. color: #573A08;
  1139. }
  1140. .ui.form .fields.warning .field .ui.dropdown,
  1141. .ui.form .field.warning .ui.dropdown {
  1142. border-color: #C9BA9B !important;
  1143. }
  1144. .ui.form .fields.warning .field .ui.dropdown:hover,
  1145. .ui.form .field.warning .ui.dropdown:hover {
  1146. border-color: #C9BA9B !important;
  1147. }
  1148. .ui.form .fields.warning .field .ui.dropdown:hover .menu,
  1149. .ui.form .field.warning .ui.dropdown:hover .menu {
  1150. border-color: #C9BA9B;
  1151. }
  1152. .ui.form .fields.warning .field .ui.multiple.selection.dropdown > .label,
  1153. .ui.form .field.warning .ui.multiple.selection.dropdown > .label {
  1154. background-color: #eaeacc;
  1155. color: #573A08;
  1156. }
  1157. /* Hover */
  1158. .ui.form .fields.warning .field .ui.dropdown .menu .item:hover,
  1159. .ui.form .field.warning .ui.dropdown .menu .item:hover {
  1160. background-color: #fbfbe9;
  1161. }
  1162. /* Selected */
  1163. .ui.form .fields.warning .field .ui.dropdown .menu .selected.item,
  1164. .ui.form .field.warning .ui.dropdown .menu .selected.item {
  1165. background-color: #fbfbe9;
  1166. }
  1167. /* Active */
  1168. .ui.form .fields.warning .field .ui.dropdown .menu .active.item,
  1169. .ui.form .field.warning .ui.dropdown .menu .active.item {
  1170. background-color: #fdfdce !important;
  1171. }
  1172. /*--------------------
  1173. Checkbox State
  1174. ---------------------*/
  1175. .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label,
  1176. .ui.form .field.warning .checkbox:not(.toggle):not(.slider) label,
  1177. .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box,
  1178. .ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box {
  1179. color: #573A08;
  1180. }
  1181. .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label:before,
  1182. .ui.form .field.warning .checkbox:not(.toggle):not(.slider) label:before,
  1183. .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box:before,
  1184. .ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box:before {
  1185. background: #FFFAF3;
  1186. border-color: #C9BA9B;
  1187. }
  1188. .ui.form .fields.warning .field .checkbox label:after,
  1189. .ui.form .field.warning .checkbox label:after,
  1190. .ui.form .fields.warning .field .checkbox .box:after,
  1191. .ui.form .field.warning .checkbox .box:after {
  1192. color: #573A08;
  1193. }
  1194. /*--------------------
  1195. Disabled
  1196. ---------------------*/
  1197. .ui.form .disabled.fields .field,
  1198. .ui.form .disabled.field,
  1199. .ui.form .field :disabled {
  1200. pointer-events: none;
  1201. opacity: 0.45;
  1202. }
  1203. .ui.form .field.disabled > label,
  1204. .ui.form .fields.disabled > label {
  1205. opacity: 0.45;
  1206. }
  1207. .ui.form .field.disabled :disabled {
  1208. opacity: 1;
  1209. }
  1210. /*--------------
  1211. Loading
  1212. ---------------*/
  1213. .ui.loading.form {
  1214. position: relative;
  1215. cursor: default;
  1216. pointer-events: none;
  1217. }
  1218. .ui.loading.form:before {
  1219. position: absolute;
  1220. content: '';
  1221. top: 0;
  1222. left: 0;
  1223. background: rgba(255, 255, 255, 0.8);
  1224. width: 100%;
  1225. height: 100%;
  1226. z-index: 100;
  1227. }
  1228. .ui.loading.form.segments:before {
  1229. border-radius: 0.28571429rem;
  1230. }
  1231. .ui.loading.form:after {
  1232. position: absolute;
  1233. content: '';
  1234. top: 50%;
  1235. left: 50%;
  1236. margin: -1.5em 0 0 -1.5em;
  1237. width: 3em;
  1238. height: 3em;
  1239. -webkit-animation: loader 0.6s infinite linear;
  1240. animation: loader 0.6s infinite linear;
  1241. border: 0.2em solid #767676;
  1242. border-radius: 500rem;
  1243. -webkit-box-shadow: 0 0 0 1px transparent;
  1244. box-shadow: 0 0 0 1px transparent;
  1245. visibility: visible;
  1246. z-index: 101;
  1247. }
  1248. /*******************************
  1249. Element Types
  1250. *******************************/
  1251. /*--------------------
  1252. Required Field
  1253. ---------------------*/
  1254. .ui.form .required.fields:not(.grouped) > .field > label:after,
  1255. .ui.form .required.fields.grouped > label:after,
  1256. .ui.form .required.field > label:after,
  1257. .ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
  1258. .ui.form .required.field > .checkbox:after,
  1259. .ui.form label.required:after {
  1260. margin: -0.2em 0 0 0.2em;
  1261. content: '*';
  1262. color: #DB2828;
  1263. }
  1264. .ui.form .required.fields:not(.grouped) > .field > label:after,
  1265. .ui.form .required.fields.grouped > label:after,
  1266. .ui.form .required.field > label:after,
  1267. .ui.form label.required:after {
  1268. display: inline-block;
  1269. vertical-align: top;
  1270. }
  1271. .ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
  1272. .ui.form .required.field > .checkbox:after {
  1273. position: absolute;
  1274. top: 0;
  1275. left: 100%;
  1276. }
  1277. /*******************************
  1278. Variations
  1279. *******************************/
  1280. /*--------------------
  1281. Inverted Colors
  1282. ---------------------*/
  1283. .ui.inverted.form label,
  1284. .ui.form .inverted.segment label,
  1285. .ui.form .inverted.segment .ui.checkbox label,
  1286. .ui.form .inverted.segment .ui.checkbox .box,
  1287. .ui.inverted.form .ui.checkbox label,
  1288. .ui.inverted.form .ui.checkbox .box,
  1289. .ui.inverted.form .inline.fields > label,
  1290. .ui.inverted.form .inline.fields .field > label,
  1291. .ui.inverted.form .inline.fields .field > p,
  1292. .ui.inverted.form .inline.field > label,
  1293. .ui.inverted.form .inline.field > p {
  1294. color: rgba(255, 255, 255, 0.9);
  1295. }
  1296. .ui.inverted.loading.form {
  1297. color: #FFFFFF;
  1298. }
  1299. .ui.inverted.loading.form:before {
  1300. background: rgba(0, 0, 0, 0.85);
  1301. }
  1302. /* Inverted Field */
  1303. .ui.inverted.form input:not([type]),
  1304. .ui.inverted.form input[type="date"],
  1305. .ui.inverted.form input[type="datetime-local"],
  1306. .ui.inverted.form input[type="email"],
  1307. .ui.inverted.form input[type="number"],
  1308. .ui.inverted.form input[type="password"],
  1309. .ui.inverted.form input[type="search"],
  1310. .ui.inverted.form input[type="tel"],
  1311. .ui.inverted.form input[type="time"],
  1312. .ui.inverted.form input[type="text"],
  1313. .ui.inverted.form input[type="file"],
  1314. .ui.inverted.form input[type="url"] {
  1315. background: #FFFFFF;
  1316. border-color: rgba(255, 255, 255, 0.1);
  1317. color: rgba(0, 0, 0, 0.87);
  1318. -webkit-box-shadow: none;
  1319. box-shadow: none;
  1320. }
  1321. /*--------------------
  1322. Field Groups
  1323. ---------------------*/
  1324. /* Grouped Vertically */
  1325. .ui.form .grouped.fields {
  1326. display: block;
  1327. margin: 0 0 1em;
  1328. }
  1329. .ui.form .grouped.fields:last-child {
  1330. margin-bottom: 0;
  1331. }
  1332. .ui.form .grouped.fields > label {
  1333. margin: 0 0 0.28571429rem 0;
  1334. color: rgba(0, 0, 0, 0.87);
  1335. font-size: 0.92857143em;
  1336. font-weight: bold;
  1337. text-transform: none;
  1338. }
  1339. .ui.form .grouped.fields .field,
  1340. .ui.form .grouped.inline.fields .field {
  1341. display: block;
  1342. margin: 0.5em 0;
  1343. padding: 0;
  1344. }
  1345. /*--------------------
  1346. Fields
  1347. ---------------------*/
  1348. /* Split fields */
  1349. .ui.form .fields {
  1350. display: -webkit-box;
  1351. display: -ms-flexbox;
  1352. display: flex;
  1353. -webkit-box-orient: horizontal;
  1354. -webkit-box-direction: normal;
  1355. -ms-flex-direction: row;
  1356. flex-direction: row;
  1357. margin: 0 -0.5em 1em;
  1358. }
  1359. .ui.form .fields > .field {
  1360. -webkit-box-flex: 0;
  1361. -ms-flex: 0 1 auto;
  1362. flex: 0 1 auto;
  1363. padding-left: 0.5em;
  1364. padding-right: 0.5em;
  1365. }
  1366. .ui.form .fields > .field:first-child {
  1367. border-left: none;
  1368. -webkit-box-shadow: none;
  1369. box-shadow: none;
  1370. }
  1371. /* Other Combinations */
  1372. .ui.form .two.fields > .fields,
  1373. .ui.form .two.fields > .field {
  1374. width: 50%;
  1375. }
  1376. .ui.form .three.fields > .fields,
  1377. .ui.form .three.fields > .field {
  1378. width: 33.33333333%;
  1379. }
  1380. .ui.form .four.fields > .fields,
  1381. .ui.form .four.fields > .field {
  1382. width: 25%;
  1383. }
  1384. .ui.form .five.fields > .fields,
  1385. .ui.form .five.fields > .field {
  1386. width: 20%;
  1387. }
  1388. .ui.form .six.fields > .fields,
  1389. .ui.form .six.fields > .field {
  1390. width: 16.66666667%;
  1391. }
  1392. .ui.form .seven.fields > .fields,
  1393. .ui.form .seven.fields > .field {
  1394. width: 14.28571429%;
  1395. }
  1396. .ui.form .eight.fields > .fields,
  1397. .ui.form .eight.fields > .field {
  1398. width: 12.5%;
  1399. }
  1400. .ui.form .nine.fields > .fields,
  1401. .ui.form .nine.fields > .field {
  1402. width: 11.11111111%;
  1403. }
  1404. .ui.form .ten.fields > .fields,
  1405. .ui.form .ten.fields > .field {
  1406. width: 10%;
  1407. }
  1408. /* Swap to full width on mobile */
  1409. @media only screen and (max-width: 767.98px) {
  1410. .ui.form .fields {
  1411. -ms-flex-wrap: wrap;
  1412. flex-wrap: wrap;
  1413. }
  1414. .ui[class*="equal width"].form:not(.unstackable) .fields > .field,
  1415. .ui.form:not(.unstackable) [class*="equal width"].fields:not(.unstackable) > .field,
  1416. .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields,
  1417. .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field,
  1418. .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields,
  1419. .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field,
  1420. .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields,
  1421. .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field,
  1422. .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields,
  1423. .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field,
  1424. .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .fields,
  1425. .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .field,
  1426. .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .fields,
  1427. .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .field,
  1428. .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .fields,
  1429. .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .field,
  1430. .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .fields,
  1431. .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .field,
  1432. .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields,
  1433. .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .field {
  1434. width: 100% !important;
  1435. margin: 0 0 1em;
  1436. }
  1437. }
  1438. /* Sizing Combinations */
  1439. .ui.form .fields .wide.field {
  1440. width: 6.25%;
  1441. padding-left: 0.5em;
  1442. padding-right: 0.5em;
  1443. }
  1444. .ui.form .one.wide.field {
  1445. width: 6.25% !important;
  1446. }
  1447. .ui.form .two.wide.field {
  1448. width: 12.5% !important;
  1449. }
  1450. .ui.form .three.wide.field {
  1451. width: 18.75% !important;
  1452. }
  1453. .ui.form .four.wide.field {
  1454. width: 25% !important;
  1455. }
  1456. .ui.form .five.wide.field {
  1457. width: 31.25% !important;
  1458. }
  1459. .ui.form .six.wide.field {
  1460. width: 37.5% !important;
  1461. }
  1462. .ui.form .seven.wide.field {
  1463. width: 43.75% !important;
  1464. }
  1465. .ui.form .eight.wide.field {
  1466. width: 50% !important;
  1467. }
  1468. .ui.form .nine.wide.field {
  1469. width: 56.25% !important;
  1470. }
  1471. .ui.form .ten.wide.field {
  1472. width: 62.5% !important;
  1473. }
  1474. .ui.form .eleven.wide.field {
  1475. width: 68.75% !important;
  1476. }
  1477. .ui.form .twelve.wide.field {
  1478. width: 75% !important;
  1479. }
  1480. .ui.form .thirteen.wide.field {
  1481. width: 81.25% !important;
  1482. }
  1483. .ui.form .fourteen.wide.field {
  1484. width: 87.5% !important;
  1485. }
  1486. .ui.form .fifteen.wide.field {
  1487. width: 93.75% !important;
  1488. }
  1489. .ui.form .sixteen.wide.field {
  1490. width: 100% !important;
  1491. }
  1492. /* Swap to full width on mobile */
  1493. @media only screen and (max-width: 767.98px) {
  1494. .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields,
  1495. .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field,
  1496. .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields,
  1497. .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field,
  1498. .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields,
  1499. .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field,
  1500. .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields,
  1501. .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field,
  1502. .ui.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field,
  1503. .ui.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field,
  1504. .ui.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field,
  1505. .ui.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field,
  1506. .ui.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field,
  1507. .ui.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field,
  1508. .ui.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field,
  1509. .ui.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field,
  1510. .ui.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field,
  1511. .ui.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field,
  1512. .ui.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field,
  1513. .ui.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field,
  1514. .ui.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field,
  1515. .ui.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field,
  1516. .ui.form:not(.unstackable) .fields:not(.unstackable) > .sixteen.wide.field {
  1517. width: 100% !important;
  1518. }
  1519. .ui.form .fields {
  1520. margin-bottom: 0;
  1521. }
  1522. }
  1523. /*--------------------
  1524. Equal Width
  1525. ---------------------*/
  1526. .ui[class*="equal width"].form .fields > .field,
  1527. .ui.form [class*="equal width"].fields > .field {
  1528. width: 100%;
  1529. -webkit-box-flex: 1;
  1530. -ms-flex: 1 1 auto;
  1531. flex: 1 1 auto;
  1532. }
  1533. /*--------------------
  1534. Inline Fields
  1535. ---------------------*/
  1536. .ui.form .inline.fields {
  1537. margin: 0 0 1em;
  1538. -webkit-box-align: center;
  1539. -ms-flex-align: center;
  1540. align-items: center;
  1541. }
  1542. .ui.form .inline.fields .field {
  1543. margin: 0;
  1544. padding: 0 1em 0 0;
  1545. }
  1546. /* Inline Label */
  1547. .ui.form .inline.fields > label,
  1548. .ui.form .inline.fields .field > label,
  1549. .ui.form .inline.fields .field > p,
  1550. .ui.form .inline.field > label,
  1551. .ui.form .inline.field > p {
  1552. display: inline-block;
  1553. width: auto;
  1554. margin-top: 0;
  1555. margin-bottom: 0;
  1556. vertical-align: baseline;
  1557. font-size: 0.92857143em;
  1558. font-weight: bold;
  1559. color: rgba(0, 0, 0, 0.87);
  1560. text-transform: none;
  1561. }
  1562. /* Grouped Inline Label */
  1563. .ui.form .inline.fields > label {
  1564. margin: 0.035714em 1em 0 0;
  1565. }
  1566. /* Inline Input */
  1567. .ui.form .inline.fields .field > input,
  1568. .ui.form .inline.fields .field > select,
  1569. .ui.form .inline.field > input,
  1570. .ui.form .inline.field > select {
  1571. display: inline-block;
  1572. width: auto;
  1573. margin-top: 0;
  1574. margin-bottom: 0;
  1575. vertical-align: middle;
  1576. font-size: 1em;
  1577. }
  1578. .ui.form .inline.fields .field .calendar:not(.popup),
  1579. .ui.form .inline.field .calendar:not(.popup) {
  1580. display: inline-block;
  1581. }
  1582. .ui.form .inline.fields .field .calendar:not(.popup) > .input > input,
  1583. .ui.form .inline.field .calendar:not(.popup) > .input > input {
  1584. width: 13.11em;
  1585. }
  1586. /* Label */
  1587. .ui.form .inline.fields .field > :first-child,
  1588. .ui.form .inline.field > :first-child {
  1589. margin: 0 0.85714286em 0 0;
  1590. }
  1591. .ui.form .inline.fields .field > :only-child,
  1592. .ui.form .inline.field > :only-child {
  1593. margin: 0;
  1594. }
  1595. /* Wide */
  1596. .ui.form .inline.fields .wide.field {
  1597. display: -webkit-box;
  1598. display: -ms-flexbox;
  1599. display: flex;
  1600. -webkit-box-align: center;
  1601. -ms-flex-align: center;
  1602. align-items: center;
  1603. }
  1604. .ui.form .inline.fields .wide.field > input,
  1605. .ui.form .inline.fields .wide.field > select {
  1606. width: 100%;
  1607. }
  1608. /*--------------------
  1609. Sizes
  1610. ---------------------*/
  1611. .ui.form,
  1612. .ui.form .field .dropdown,
  1613. .ui.form .field .dropdown .menu > .item {
  1614. font-size: 1rem;
  1615. }
  1616. .ui.mini.form,
  1617. .ui.mini.form .field .dropdown,
  1618. .ui.mini.form .field .dropdown .menu > .item {
  1619. font-size: 0.78571429rem;
  1620. }
  1621. .ui.tiny.form,
  1622. .ui.tiny.form .field .dropdown,
  1623. .ui.tiny.form .field .dropdown .menu > .item {
  1624. font-size: 0.85714286rem;
  1625. }
  1626. .ui.small.form,
  1627. .ui.small.form .field .dropdown,
  1628. .ui.small.form .field .dropdown .menu > .item {
  1629. font-size: 0.92857143rem;
  1630. }
  1631. .ui.large.form,
  1632. .ui.large.form .field .dropdown,
  1633. .ui.large.form .field .dropdown .menu > .item {
  1634. font-size: 1.14285714rem;
  1635. }
  1636. .ui.big.form,
  1637. .ui.big.form .field .dropdown,
  1638. .ui.big.form .field .dropdown .menu > .item {
  1639. font-size: 1.28571429rem;
  1640. }
  1641. .ui.huge.form,
  1642. .ui.huge.form .field .dropdown,
  1643. .ui.huge.form .field .dropdown .menu > .item {
  1644. font-size: 1.42857143rem;
  1645. }
  1646. .ui.massive.form,
  1647. .ui.massive.form .field .dropdown,
  1648. .ui.massive.form .field .dropdown .menu > .item {
  1649. font-size: 1.71428571rem;
  1650. }
  1651. /*******************************
  1652. Theme Overrides
  1653. *******************************/
  1654. /*******************************
  1655. Site Overrides
  1656. *******************************/