fcf.default.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752
  1. @keyframes spinAround {
  2. from {
  3. transform: rotate(0deg);
  4. }
  5. to {
  6. transform: rotate(359deg);
  7. }
  8. }
  9. .button,.file {
  10. -webkit-touch-callout: none;
  11. -webkit-user-select: none;
  12. -moz-user-select: none;
  13. -ms-user-select: none;
  14. user-select: none;
  15. }
  16. .button,.input,.textarea,.select select,.file-cta,.file-name {
  17. -moz-appearance: none;
  18. -webkit-appearance: none;
  19. align-items: center;
  20. border: 1px solid transparent;
  21. border-radius: 4px;
  22. box-shadow: none;
  23. display: inline-flex;
  24. font-size: 1rem;
  25. height: 2.5em;
  26. justify-content: flex-start;
  27. line-height: 1.5;
  28. padding-bottom: calc(0.5em - 1px);
  29. padding-left: calc(0.75em - 1px);
  30. padding-right: calc(0.75em - 1px);
  31. padding-top: calc(0.5em - 1px);
  32. position: relative;
  33. vertical-align: top;
  34. }
  35. .button:focus,.input:focus,.textarea:focus,.select select:focus,.file-cta:focus,.file-name:focus,.button:active,.input:active,.textarea:active,.select select:active,.file-cta:active,.file-name:active {
  36. outline: none;
  37. }
  38. .button[disabled],.input[disabled],.textarea[disabled],.select select[disabled],.file-cta[disabled],.file-name[disabled] {
  39. cursor: not-allowed;
  40. }
  41. html {
  42. background-color: white;
  43. font-size: 16px;
  44. -moz-osx-font-smoothing: grayscale;
  45. -webkit-font-smoothing: antialiased;
  46. min-width: 300px;
  47. overflow-x: hidden;
  48. overflow-y: scroll;
  49. text-rendering: optimizeLegibility;
  50. text-size-adjust: 100%;
  51. }
  52. body,button,input,select,textarea {
  53. font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  54. }
  55. body {
  56. color: #4a4a4a;
  57. font-size: 1em;
  58. font-weight: 400;
  59. line-height: 1.5;
  60. }
  61. input[type="checkbox"],input[type="radio"] {
  62. vertical-align: baseline;
  63. }
  64. span {
  65. font-style: inherit;
  66. font-weight: inherit;
  67. }
  68. strong {
  69. color: #363636;
  70. font-weight: 700;
  71. }
  72. legend,textarea {
  73. margin: 0;
  74. padding: 0;
  75. }
  76. button,input,select,textarea {
  77. margin: 0;
  78. }
  79. html {
  80. box-sizing: border-box;
  81. }
  82. *,*::before,*::after {
  83. box-sizing: inherit;
  84. }
  85. .button {
  86. background-color: white;
  87. border-color: #dbdbdb;
  88. border-width: 1px;
  89. color: #363636;
  90. cursor: pointer;
  91. justify-content: center;
  92. padding-bottom: calc(0.5em - 1px);
  93. padding-left: 1em;
  94. padding-right: 1em;
  95. padding-top: calc(0.5em - 1px);
  96. text-align: center;
  97. white-space: nowrap;
  98. }
  99. .button strong {
  100. color: inherit;
  101. }
  102. .button:hover {
  103. border-color: #b5b5b5;
  104. color: #363636;
  105. }
  106. .button:focus {
  107. border-color: #3273dc;
  108. color: #363636;
  109. }
  110. .button:focus:not(:active) {
  111. box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
  112. }
  113. .button:active {
  114. border-color: #4a4a4a;
  115. color: #363636;
  116. }
  117. .button.is-text {
  118. background-color: transparent;
  119. border-color: transparent;
  120. color: #4a4a4a;
  121. text-decoration: underline;
  122. }
  123. .button.is-text:hover,.button.is-text:focus {
  124. background-color: whitesmoke;
  125. color: #363636;
  126. }
  127. .button.is-text:active {
  128. background-color: #e8e8e8;
  129. color: #363636;
  130. }
  131. .button.is-text[disabled] {
  132. background-color: transparent;
  133. border-color: transparent;
  134. box-shadow: none;
  135. }
  136. .button.is-link {
  137. background-color: #3273dc;
  138. border-color: transparent;
  139. color: #fff;
  140. }
  141. .button.is-link:hover {
  142. background-color: #276cda;
  143. border-color: transparent;
  144. color: #fff;
  145. }
  146. .button.is-link:focus {
  147. border-color: transparent;
  148. color: #fff;
  149. }
  150. .button.is-link:focus:not(:active) {
  151. box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
  152. }
  153. .button.is-link:active {
  154. background-color: #2366d1;
  155. border-color: transparent;
  156. color: #fff;
  157. }
  158. .button.is-link[disabled] {
  159. background-color: #3273dc;
  160. border-color: transparent;
  161. box-shadow: none;
  162. }
  163. .button.is-normal {
  164. font-size: 1rem;
  165. }
  166. .button.is-medium {
  167. font-size: 1.25rem;
  168. }
  169. .button[disabled] {
  170. background-color: white;
  171. border-color: #dbdbdb;
  172. box-shadow: none;
  173. opacity: 0.5;
  174. }
  175. .button.is-fullwidth {
  176. display: flex;
  177. width: 100%;
  178. }
  179. .buttons {
  180. align-items: center;
  181. display: flex;
  182. flex-wrap: wrap;
  183. justify-content: flex-start;
  184. }
  185. .buttons .button {
  186. margin-bottom: 0.5rem;
  187. }
  188. .buttons .button:not(:last-child):not(.is-fullwidth) {
  189. margin-right: 0.5rem;
  190. }
  191. .buttons:last-child {
  192. margin-bottom: -0.5rem;
  193. }
  194. .buttons:not(:last-child) {
  195. margin-bottom: 1rem;
  196. }
  197. .input,.textarea,.select select {
  198. background-color: white;
  199. border-color: #dbdbdb;
  200. border-radius: 4px;
  201. color: #363636;
  202. }
  203. .input::-moz-placeholder,.textarea::-moz-placeholder,.select select::-moz-placeholder {
  204. color: rgba(54, 54, 54, 0.3);
  205. }
  206. .input::-webkit-input-placeholder,.textarea::-webkit-input-placeholder,.select select::-webkit-input-placeholder {
  207. color: rgba(54, 54, 54, 0.3);
  208. }
  209. .input:-moz-placeholder,.textarea:-moz-placeholder,.select select:-moz-placeholder {
  210. color: rgba(54, 54, 54, 0.3);
  211. }
  212. .input:-ms-input-placeholder,.textarea:-ms-input-placeholder,.select select:-ms-input-placeholder {
  213. color: rgba(54, 54, 54, 0.3);
  214. }
  215. .input:hover,.textarea:hover,.select select:hover {
  216. border-color: #b5b5b5;
  217. }
  218. .input:focus,.textarea:focus,.select select:focus,.input:active,.textarea:active,.select select:active {
  219. border-color: #3273dc;
  220. box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
  221. }
  222. .input[disabled],.textarea[disabled],.select select[disabled] {
  223. background-color: whitesmoke;
  224. border-color: whitesmoke;
  225. box-shadow: none;
  226. color: #7a7a7a;
  227. }
  228. .input[disabled]::-moz-placeholder,.textarea[disabled]::-moz-placeholder,.select select[disabled]::-moz-placeholder {
  229. color: rgba(122, 122, 122, 0.3);
  230. }
  231. .input[disabled]::-webkit-input-placeholder,.textarea[disabled]::-webkit-input-placeholder,.select select[disabled]::-webkit-input-placeholder {
  232. color: rgba(122, 122, 122, 0.3);
  233. }
  234. .input[disabled]:-moz-placeholder,.textarea[disabled]:-moz-placeholder,.select select[disabled]:-moz-placeholder {
  235. color: rgba(122, 122, 122, 0.3);
  236. }
  237. .input[disabled]:-ms-input-placeholder,.textarea[disabled]:-ms-input-placeholder,.select select[disabled]:-ms-input-placeholder {
  238. color: rgba(122, 122, 122, 0.3);
  239. }
  240. .input,.textarea {
  241. box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);
  242. max-width: 100%;
  243. width: 100%;
  244. }
  245. .input[readonly],.textarea[readonly] {
  246. box-shadow: none;
  247. }
  248. .is-link.input,.is-link.textarea {
  249. border-color: #3273dc;
  250. }
  251. .is-link.input:focus,.is-link.textarea:focus,.is-link.input:active,.is-link.textarea:active {
  252. box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
  253. }
  254. .is-medium.input,.is-medium.textarea {
  255. font-size: 1.25rem;
  256. }
  257. .is-fullwidth.input,.is-fullwidth.textarea {
  258. display: block;
  259. width: 100%;
  260. }
  261. .textarea {
  262. display: block;
  263. max-width: 100%;
  264. min-width: 100%;
  265. padding: calc(0.75em - 1px);
  266. resize: vertical;
  267. }
  268. .textarea:not([rows]) {
  269. max-height: 40em;
  270. min-height: 8em;
  271. }
  272. .textarea[rows] {
  273. height: initial;
  274. }
  275. .checkbox,.radio {
  276. cursor: pointer;
  277. display: inline-block;
  278. line-height: 1.25;
  279. position: relative;
  280. }
  281. .checkbox input,.radio input {
  282. cursor: pointer;
  283. }
  284. .checkbox:hover,.radio:hover {
  285. color: #363636;
  286. }
  287. .checkbox[disabled],.radio[disabled] {
  288. color: #7a7a7a;
  289. cursor: not-allowed;
  290. }
  291. .radio + .radio {
  292. margin-left: 0.5em;
  293. }
  294. .select {
  295. display: inline-block;
  296. max-width: 100%;
  297. position: relative;
  298. vertical-align: top;
  299. }
  300. .select:not(.is-multiple) {
  301. height: 2.5em;
  302. }
  303. .select:not(.is-multiple):not(.is-loading)::after {
  304. border: 3px solid transparent;
  305. border-radius: 2px;
  306. border-right: 0;
  307. border-top: 0;
  308. content: " ";
  309. display: block;
  310. height: 0.625em;
  311. margin-top: -0.4375em;
  312. pointer-events: none;
  313. position: absolute;
  314. top: 50%;
  315. transform: rotate(-45deg);
  316. transform-origin: center;
  317. width: 0.625em;
  318. }
  319. .select:not(.is-multiple):not(.is-loading)::after {
  320. border-color: #3273dc;
  321. right: 1.125em;
  322. z-index: 4;
  323. }
  324. .select select {
  325. cursor: pointer;
  326. display: block;
  327. font-size: 1em;
  328. max-width: 100%;
  329. outline: none;
  330. }
  331. .select select::-ms-expand {
  332. display: none;
  333. }
  334. .select select[disabled]:hover {
  335. border-color: whitesmoke;
  336. }
  337. .select select:not([multiple]) {
  338. padding-right: 2.5em;
  339. }
  340. .select select[multiple] {
  341. height: auto;
  342. padding: 0;
  343. }
  344. .select select[multiple] option {
  345. padding: 0.5em 1em;
  346. }
  347. .select.is-link:not(:hover)::after {
  348. border-color: #3273dc;
  349. }
  350. .select.is-link select {
  351. border-color: #3273dc;
  352. }
  353. .select.is-link select:hover {
  354. border-color: #2366d1;
  355. }
  356. .select.is-link select:focus,.select.is-link select:active {
  357. box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
  358. }
  359. .select.is-medium {
  360. font-size: 1.25rem;
  361. }
  362. .select.is-fullwidth {
  363. width: 100%;
  364. }
  365. .select.is-fullwidth select {
  366. width: 100%;
  367. }
  368. .file {
  369. align-items: stretch;
  370. display: flex;
  371. justify-content: flex-start;
  372. position: relative;
  373. }
  374. .file.is-link .file-cta {
  375. background-color: #3273dc;
  376. border-color: transparent;
  377. color: #fff;
  378. }
  379. .file.is-link:hover .file-cta {
  380. background-color: #276cda;
  381. border-color: transparent;
  382. color: #fff;
  383. }
  384. .file.is-link:focus .file-cta {
  385. border-color: transparent;
  386. box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
  387. color: #fff;
  388. }
  389. .file.is-link:active .file-cta {
  390. background-color: #2366d1;
  391. border-color: transparent;
  392. color: #fff;
  393. }
  394. .file.is-medium {
  395. font-size: 1.25rem;
  396. }
  397. .file.has-name .file-cta {
  398. border-bottom-right-radius: 0;
  399. border-top-right-radius: 0;
  400. }
  401. .file.has-name .file-name {
  402. border-bottom-left-radius: 0;
  403. border-top-left-radius: 0;
  404. }
  405. .file.is-fullwidth .file-label {
  406. width: 100%;
  407. }
  408. .file.is-fullwidth .file-name {
  409. flex-grow: 1;
  410. max-width: none;
  411. }
  412. .file-label {
  413. align-items: stretch;
  414. display: flex;
  415. cursor: pointer;
  416. justify-content: flex-start;
  417. overflow: hidden;
  418. position: relative;
  419. }
  420. .file-label:hover .file-cta {
  421. background-color: #eeeeee;
  422. color: #363636;
  423. }
  424. .file-label:hover .file-name {
  425. border-color: #d5d5d5;
  426. }
  427. .file-label:active .file-cta {
  428. background-color: #e8e8e8;
  429. color: #363636;
  430. }
  431. .file-label:active .file-name {
  432. border-color: #cfcfcf;
  433. }
  434. .file-input {
  435. height: 100%;
  436. left: 0;
  437. opacity: 0;
  438. outline: none;
  439. position: absolute;
  440. top: 0;
  441. width: 100%;
  442. }
  443. .file-cta,.file-name {
  444. border-color: #dbdbdb;
  445. border-radius: 4px;
  446. font-size: 1em;
  447. padding-left: 1em;
  448. padding-right: 1em;
  449. white-space: nowrap;
  450. }
  451. .file-cta {
  452. background-color: whitesmoke;
  453. color: #4a4a4a;
  454. }
  455. .file-name {
  456. border-color: #dbdbdb;
  457. border-style: solid;
  458. border-width: 1px 1px 1px 0;
  459. display: block;
  460. max-width: 16em;
  461. overflow: hidden;
  462. text-align: inherit;
  463. text-overflow: ellipsis;
  464. }
  465. .label {
  466. color: #363636;
  467. display: block;
  468. font-size: 1rem;
  469. font-weight: 700;
  470. }
  471. .label:not(:last-child) {
  472. margin-bottom: 0.5em;
  473. }
  474. .label.is-medium {
  475. font-size: 1.25rem;
  476. }
  477. .field:not(:last-child) {
  478. margin-bottom: 0.75rem;
  479. }
  480. .field-label .label {
  481. font-size: inherit;
  482. }
  483. @media screen and (max-width: 768px) {
  484. .field-label {
  485. margin-bottom: 0.5rem;
  486. }
  487. }
  488. @media screen and (min-width: 769px), print {
  489. .field-label {
  490. flex-basis: 0;
  491. flex-grow: 1;
  492. flex-shrink: 0;
  493. margin-right: 1.5rem;
  494. text-align: right;
  495. }
  496. .field-label.is-normal {
  497. padding-top: 0.375em;
  498. }
  499. .field-label.is-medium {
  500. font-size: 1.25rem;
  501. padding-top: 0.375em;
  502. }
  503. }
  504. .field-body .field .field {
  505. margin-bottom: 0;
  506. }
  507. @media screen and (min-width: 769px), print {
  508. .field-body {
  509. display: flex;
  510. flex-basis: 0;
  511. flex-grow: 5;
  512. flex-shrink: 1;
  513. }
  514. .field-body .field {
  515. margin-bottom: 0;
  516. }
  517. .field-body > .field {
  518. flex-shrink: 1;
  519. }
  520. .field-body > .field:not(:last-child) {
  521. margin-right: 0.75rem;
  522. }
  523. }
  524. .control {
  525. box-sizing: border-box;
  526. clear: both;
  527. font-size: 1rem;
  528. position: relative;
  529. text-align: inherit;
  530. }
  531. .has-text-link {
  532. color: #3273dc !important;
  533. }
  534. .my-0 {
  535. margin-top: 0 !important;
  536. margin-bottom: 0 !important;
  537. }
  538. .my-1 {
  539. margin-top: 0.25rem !important;
  540. margin-bottom: 0.25rem !important;
  541. }
  542. .my-2 {
  543. margin-top: 0.5rem !important;
  544. margin-bottom: 0.5rem !important;
  545. }
  546. .my-3 {
  547. margin-top: 0.75rem !important;
  548. margin-bottom: 0.75rem !important;
  549. }
  550. .my-4 {
  551. margin-top: 1rem !important;
  552. margin-bottom: 1rem !important;
  553. }
  554. .my-5 {
  555. margin-top: 1.5rem !important;
  556. margin-bottom: 1.5rem !important;
  557. }
  558. .my-6 {
  559. margin-top: 3rem !important;
  560. margin-bottom: 3rem !important;
  561. }
  562. .px-0 {
  563. padding-left: 0 !important;
  564. padding-right: 0 !important;
  565. }
  566. .px-1 {
  567. padding-left: 0.25rem !important;
  568. padding-right: 0.25rem !important;
  569. }
  570. .px-2 {
  571. padding-left: 0.5rem !important;
  572. padding-right: 0.5rem !important;
  573. }
  574. .px-3 {
  575. padding-left: 0.75rem !important;
  576. padding-right: 0.75rem !important;
  577. }
  578. .px-4 {
  579. padding-left: 1rem !important;
  580. padding-right: 1rem !important;
  581. }
  582. .px-5 {
  583. padding-left: 1.5rem !important;
  584. padding-right: 1.5rem !important;
  585. }
  586. .px-6 {
  587. padding-left: 3rem !important;
  588. padding-right: 3rem !important;
  589. }
  590. .has-text-weight-normal {
  591. font-weight: 400 !important;
  592. }
  593. .has-text-weight-medium {
  594. font-weight: 500 !important;
  595. }
  596. .is-hidden {
  597. display: none !important;
  598. }
  599. @media screen and (max-width: 1023px) {
  600. .is-hidden-touch {
  601. display: none !important;
  602. }
  603. }
  604. .js-validate-error-label {
  605. color: crimson;
  606. font-size: 0.9em;
  607. }
  608. .js-validate-error-field {
  609. border: 1px solid #dc3545 !important;
  610. }
  611. .js-validate-error-field:focus {
  612. box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  613. }