You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

8461 lines
151 KiB

  1. /*!
  2. * Materialize v0.97.7 (http://materializecss.com)
  3. * Copyright 2014-2015 Materialize
  4. * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
  5. */
  6. .materialize-red {
  7. background-color: #e51c23 !important;
  8. }
  9. .materialize-red-text {
  10. color: #e51c23 !important;
  11. }
  12. .materialize-red.lighten-5 {
  13. background-color: #fdeaeb !important;
  14. }
  15. .materialize-red-text.text-lighten-5 {
  16. color: #fdeaeb !important;
  17. }
  18. .materialize-red.lighten-4 {
  19. background-color: #f8c1c3 !important;
  20. }
  21. .materialize-red-text.text-lighten-4 {
  22. color: #f8c1c3 !important;
  23. }
  24. .materialize-red.lighten-3 {
  25. background-color: #f3989b !important;
  26. }
  27. .materialize-red-text.text-lighten-3 {
  28. color: #f3989b !important;
  29. }
  30. .materialize-red.lighten-2 {
  31. background-color: #ee6e73 !important;
  32. }
  33. .materialize-red-text.text-lighten-2 {
  34. color: #ee6e73 !important;
  35. }
  36. .materialize-red.lighten-1 {
  37. background-color: #ea454b !important;
  38. }
  39. .materialize-red-text.text-lighten-1 {
  40. color: #ea454b !important;
  41. }
  42. .materialize-red.darken-1 {
  43. background-color: #d0181e !important;
  44. }
  45. .materialize-red-text.text-darken-1 {
  46. color: #d0181e !important;
  47. }
  48. .materialize-red.darken-2 {
  49. background-color: #b9151b !important;
  50. }
  51. .materialize-red-text.text-darken-2 {
  52. color: #b9151b !important;
  53. }
  54. .materialize-red.darken-3 {
  55. background-color: #a21318 !important;
  56. }
  57. .materialize-red-text.text-darken-3 {
  58. color: #a21318 !important;
  59. }
  60. .materialize-red.darken-4 {
  61. background-color: #8b1014 !important;
  62. }
  63. .materialize-red-text.text-darken-4 {
  64. color: #8b1014 !important;
  65. }
  66. .red {
  67. background-color: #F44336 !important;
  68. }
  69. .red-text {
  70. color: #F44336 !important;
  71. }
  72. .red.lighten-5 {
  73. background-color: #FFEBEE !important;
  74. }
  75. .red-text.text-lighten-5 {
  76. color: #FFEBEE !important;
  77. }
  78. .red.lighten-4 {
  79. background-color: #FFCDD2 !important;
  80. }
  81. .red-text.text-lighten-4 {
  82. color: #FFCDD2 !important;
  83. }
  84. .red.lighten-3 {
  85. background-color: #EF9A9A !important;
  86. }
  87. .red-text.text-lighten-3 {
  88. color: #EF9A9A !important;
  89. }
  90. .red.lighten-2 {
  91. background-color: #E57373 !important;
  92. }
  93. .red-text.text-lighten-2 {
  94. color: #E57373 !important;
  95. }
  96. .red.lighten-1 {
  97. background-color: #EF5350 !important;
  98. }
  99. .red-text.text-lighten-1 {
  100. color: #EF5350 !important;
  101. }
  102. .red.darken-1 {
  103. background-color: #E53935 !important;
  104. }
  105. .red-text.text-darken-1 {
  106. color: #E53935 !important;
  107. }
  108. .red.darken-2 {
  109. background-color: #D32F2F !important;
  110. }
  111. .red-text.text-darken-2 {
  112. color: #D32F2F !important;
  113. }
  114. .red.darken-3 {
  115. background-color: #C62828 !important;
  116. }
  117. .red-text.text-darken-3 {
  118. color: #C62828 !important;
  119. }
  120. .red.darken-4 {
  121. background-color: #B71C1C !important;
  122. }
  123. .red-text.text-darken-4 {
  124. color: #B71C1C !important;
  125. }
  126. .red.accent-1 {
  127. background-color: #FF8A80 !important;
  128. }
  129. .red-text.text-accent-1 {
  130. color: #FF8A80 !important;
  131. }
  132. .red.accent-2 {
  133. background-color: #FF5252 !important;
  134. }
  135. .red-text.text-accent-2 {
  136. color: #FF5252 !important;
  137. }
  138. .red.accent-3 {
  139. background-color: #FF1744 !important;
  140. }
  141. .red-text.text-accent-3 {
  142. color: #FF1744 !important;
  143. }
  144. .red.accent-4 {
  145. background-color: #D50000 !important;
  146. }
  147. .red-text.text-accent-4 {
  148. color: #D50000 !important;
  149. }
  150. .pink {
  151. background-color: #e91e63 !important;
  152. }
  153. .pink-text {
  154. color: #e91e63 !important;
  155. }
  156. .pink.lighten-5 {
  157. background-color: #fce4ec !important;
  158. }
  159. .pink-text.text-lighten-5 {
  160. color: #fce4ec !important;
  161. }
  162. .pink.lighten-4 {
  163. background-color: #f8bbd0 !important;
  164. }
  165. .pink-text.text-lighten-4 {
  166. color: #f8bbd0 !important;
  167. }
  168. .pink.lighten-3 {
  169. background-color: #f48fb1 !important;
  170. }
  171. .pink-text.text-lighten-3 {
  172. color: #f48fb1 !important;
  173. }
  174. .pink.lighten-2 {
  175. background-color: #f06292 !important;
  176. }
  177. .pink-text.text-lighten-2 {
  178. color: #f06292 !important;
  179. }
  180. .pink.lighten-1 {
  181. background-color: #ec407a !important;
  182. }
  183. .pink-text.text-lighten-1 {
  184. color: #ec407a !important;
  185. }
  186. .pink.darken-1 {
  187. background-color: #d81b60 !important;
  188. }
  189. .pink-text.text-darken-1 {
  190. color: #d81b60 !important;
  191. }
  192. .pink.darken-2 {
  193. background-color: #c2185b !important;
  194. }
  195. .pink-text.text-darken-2 {
  196. color: #c2185b !important;
  197. }
  198. .pink.darken-3 {
  199. background-color: #ad1457 !important;
  200. }
  201. .pink-text.text-darken-3 {
  202. color: #ad1457 !important;
  203. }
  204. .pink.darken-4 {
  205. background-color: #880e4f !important;
  206. }
  207. .pink-text.text-darken-4 {
  208. color: #880e4f !important;
  209. }
  210. .pink.accent-1 {
  211. background-color: #ff80ab !important;
  212. }
  213. .pink-text.text-accent-1 {
  214. color: #ff80ab !important;
  215. }
  216. .pink.accent-2 {
  217. background-color: #ff4081 !important;
  218. }
  219. .pink-text.text-accent-2 {
  220. color: #ff4081 !important;
  221. }
  222. .pink.accent-3 {
  223. background-color: #f50057 !important;
  224. }
  225. .pink-text.text-accent-3 {
  226. color: #f50057 !important;
  227. }
  228. .pink.accent-4 {
  229. background-color: #c51162 !important;
  230. }
  231. .pink-text.text-accent-4 {
  232. color: #c51162 !important;
  233. }
  234. .purple {
  235. background-color: #9c27b0 !important;
  236. }
  237. .purple-text {
  238. color: #9c27b0 !important;
  239. }
  240. .purple.lighten-5 {
  241. background-color: #f3e5f5 !important;
  242. }
  243. .purple-text.text-lighten-5 {
  244. color: #f3e5f5 !important;
  245. }
  246. .purple.lighten-4 {
  247. background-color: #e1bee7 !important;
  248. }
  249. .purple-text.text-lighten-4 {
  250. color: #e1bee7 !important;
  251. }
  252. .purple.lighten-3 {
  253. background-color: #ce93d8 !important;
  254. }
  255. .purple-text.text-lighten-3 {
  256. color: #ce93d8 !important;
  257. }
  258. .purple.lighten-2 {
  259. background-color: #ba68c8 !important;
  260. }
  261. .purple-text.text-lighten-2 {
  262. color: #ba68c8 !important;
  263. }
  264. .purple.lighten-1 {
  265. background-color: #ab47bc !important;
  266. }
  267. .purple-text.text-lighten-1 {
  268. color: #ab47bc !important;
  269. }
  270. .purple.darken-1 {
  271. background-color: #8e24aa !important;
  272. }
  273. .purple-text.text-darken-1 {
  274. color: #8e24aa !important;
  275. }
  276. .purple.darken-2 {
  277. background-color: #7b1fa2 !important;
  278. }
  279. .purple-text.text-darken-2 {
  280. color: #7b1fa2 !important;
  281. }
  282. .purple.darken-3 {
  283. background-color: #6a1b9a !important;
  284. }
  285. .purple-text.text-darken-3 {
  286. color: #6a1b9a !important;
  287. }
  288. .purple.darken-4 {
  289. background-color: #4a148c !important;
  290. }
  291. .purple-text.text-darken-4 {
  292. color: #4a148c !important;
  293. }
  294. .purple.accent-1 {
  295. background-color: #ea80fc !important;
  296. }
  297. .purple-text.text-accent-1 {
  298. color: #ea80fc !important;
  299. }
  300. .purple.accent-2 {
  301. background-color: #e040fb !important;
  302. }
  303. .purple-text.text-accent-2 {
  304. color: #e040fb !important;
  305. }
  306. .purple.accent-3 {
  307. background-color: #d500f9 !important;
  308. }
  309. .purple-text.text-accent-3 {
  310. color: #d500f9 !important;
  311. }
  312. .purple.accent-4 {
  313. background-color: #aa00ff !important;
  314. }
  315. .purple-text.text-accent-4 {
  316. color: #aa00ff !important;
  317. }
  318. .deep-purple {
  319. background-color: #673ab7 !important;
  320. }
  321. .deep-purple-text {
  322. color: #673ab7 !important;
  323. }
  324. .deep-purple.lighten-5 {
  325. background-color: #ede7f6 !important;
  326. }
  327. .deep-purple-text.text-lighten-5 {
  328. color: #ede7f6 !important;
  329. }
  330. .deep-purple.lighten-4 {
  331. background-color: #d1c4e9 !important;
  332. }
  333. .deep-purple-text.text-lighten-4 {
  334. color: #d1c4e9 !important;
  335. }
  336. .deep-purple.lighten-3 {
  337. background-color: #b39ddb !important;
  338. }
  339. .deep-purple-text.text-lighten-3 {
  340. color: #b39ddb !important;
  341. }
  342. .deep-purple.lighten-2 {
  343. background-color: #9575cd !important;
  344. }
  345. .deep-purple-text.text-lighten-2 {
  346. color: #9575cd !important;
  347. }
  348. .deep-purple.lighten-1 {
  349. background-color: #7e57c2 !important;
  350. }
  351. .deep-purple-text.text-lighten-1 {
  352. color: #7e57c2 !important;
  353. }
  354. .deep-purple.darken-1 {
  355. background-color: #5e35b1 !important;
  356. }
  357. .deep-purple-text.text-darken-1 {
  358. color: #5e35b1 !important;
  359. }
  360. .deep-purple.darken-2 {
  361. background-color: #512da8 !important;
  362. }
  363. .deep-purple-text.text-darken-2 {
  364. color: #512da8 !important;
  365. }
  366. .deep-purple.darken-3 {
  367. background-color: #4527a0 !important;
  368. }
  369. .deep-purple-text.text-darken-3 {
  370. color: #4527a0 !important;
  371. }
  372. .deep-purple.darken-4 {
  373. background-color: #311b92 !important;
  374. }
  375. .deep-purple-text.text-darken-4 {
  376. color: #311b92 !important;
  377. }
  378. .deep-purple.accent-1 {
  379. background-color: #b388ff !important;
  380. }
  381. .deep-purple-text.text-accent-1 {
  382. color: #b388ff !important;
  383. }
  384. .deep-purple.accent-2 {
  385. background-color: #7c4dff !important;
  386. }
  387. .deep-purple-text.text-accent-2 {
  388. color: #7c4dff !important;
  389. }
  390. .deep-purple.accent-3 {
  391. background-color: #651fff !important;
  392. }
  393. .deep-purple-text.text-accent-3 {
  394. color: #651fff !important;
  395. }
  396. .deep-purple.accent-4 {
  397. background-color: #6200ea !important;
  398. }
  399. .deep-purple-text.text-accent-4 {
  400. color: #6200ea !important;
  401. }
  402. .indigo {
  403. background-color: #3f51b5 !important;
  404. }
  405. .indigo-text {
  406. color: #3f51b5 !important;
  407. }
  408. .indigo.lighten-5 {
  409. background-color: #e8eaf6 !important;
  410. }
  411. .indigo-text.text-lighten-5 {
  412. color: #e8eaf6 !important;
  413. }
  414. .indigo.lighten-4 {
  415. background-color: #c5cae9 !important;
  416. }
  417. .indigo-text.text-lighten-4 {
  418. color: #c5cae9 !important;
  419. }
  420. .indigo.lighten-3 {
  421. background-color: #9fa8da !important;
  422. }
  423. .indigo-text.text-lighten-3 {
  424. color: #9fa8da !important;
  425. }
  426. .indigo.lighten-2 {
  427. background-color: #7986cb !important;
  428. }
  429. .indigo-text.text-lighten-2 {
  430. color: #7986cb !important;
  431. }
  432. .indigo.lighten-1 {
  433. background-color: #5c6bc0 !important;
  434. }
  435. .indigo-text.text-lighten-1 {
  436. color: #5c6bc0 !important;
  437. }
  438. .indigo.darken-1 {
  439. background-color: #3949ab !important;
  440. }
  441. .indigo-text.text-darken-1 {
  442. color: #3949ab !important;
  443. }
  444. .indigo.darken-2 {
  445. background-color: #303f9f !important;
  446. }
  447. .indigo-text.text-darken-2 {
  448. color: #303f9f !important;
  449. }
  450. .indigo.darken-3 {
  451. background-color: #283593 !important;
  452. }
  453. .indigo-text.text-darken-3 {
  454. color: #283593 !important;
  455. }
  456. .indigo.darken-4 {
  457. background-color: #1a237e !important;
  458. }
  459. .indigo-text.text-darken-4 {
  460. color: #1a237e !important;
  461. }
  462. .indigo.accent-1 {
  463. background-color: #8c9eff !important;
  464. }
  465. .indigo-text.text-accent-1 {
  466. color: #8c9eff !important;
  467. }
  468. .indigo.accent-2 {
  469. background-color: #536dfe !important;
  470. }
  471. .indigo-text.text-accent-2 {
  472. color: #536dfe !important;
  473. }
  474. .indigo.accent-3 {
  475. background-color: #3d5afe !important;
  476. }
  477. .indigo-text.text-accent-3 {
  478. color: #3d5afe !important;
  479. }
  480. .indigo.accent-4 {
  481. background-color: #304ffe !important;
  482. }
  483. .indigo-text.text-accent-4 {
  484. color: #304ffe !important;
  485. }
  486. .blue {
  487. background-color: #2196F3 !important;
  488. }
  489. .blue-text {
  490. color: #2196F3 !important;
  491. }
  492. .blue.lighten-5 {
  493. background-color: #E3F2FD !important;
  494. }
  495. .blue-text.text-lighten-5 {
  496. color: #E3F2FD !important;
  497. }
  498. .blue.lighten-4 {
  499. background-color: #BBDEFB !important;
  500. }
  501. .blue-text.text-lighten-4 {
  502. color: #BBDEFB !important;
  503. }
  504. .blue.lighten-3 {
  505. background-color: #90CAF9 !important;
  506. }
  507. .blue-text.text-lighten-3 {
  508. color: #90CAF9 !important;
  509. }
  510. .blue.lighten-2 {
  511. background-color: #64B5F6 !important;
  512. }
  513. .blue-text.text-lighten-2 {
  514. color: #64B5F6 !important;
  515. }
  516. .blue.lighten-1 {
  517. background-color: #42A5F5 !important;
  518. }
  519. .blue-text.text-lighten-1 {
  520. color: #42A5F5 !important;
  521. }
  522. .blue.darken-1 {
  523. background-color: #1E88E5 !important;
  524. }
  525. .blue-text.text-darken-1 {
  526. color: #1E88E5 !important;
  527. }
  528. .blue.darken-2 {
  529. background-color: #1976D2 !important;
  530. }
  531. .blue-text.text-darken-2 {
  532. color: #1976D2 !important;
  533. }
  534. .blue.darken-3 {
  535. background-color: #1565C0 !important;
  536. }
  537. .blue-text.text-darken-3 {
  538. color: #1565C0 !important;
  539. }
  540. .blue.darken-4 {
  541. background-color: #0D47A1 !important;
  542. }
  543. .blue-text.text-darken-4 {
  544. color: #0D47A1 !important;
  545. }
  546. .blue.accent-1 {
  547. background-color: #82B1FF !important;
  548. }
  549. .blue-text.text-accent-1 {
  550. color: #82B1FF !important;
  551. }
  552. .blue.accent-2 {
  553. background-color: #448AFF !important;
  554. }
  555. .blue-text.text-accent-2 {
  556. color: #448AFF !important;
  557. }
  558. .blue.accent-3 {
  559. background-color: #2979FF !important;
  560. }
  561. .blue-text.text-accent-3 {
  562. color: #2979FF !important;
  563. }
  564. .blue.accent-4 {
  565. background-color: #2962FF !important;
  566. }
  567. .blue-text.text-accent-4 {
  568. color: #2962FF !important;
  569. }
  570. .light-blue {
  571. background-color: #03a9f4 !important;
  572. }
  573. .light-blue-text {
  574. color: #03a9f4 !important;
  575. }
  576. .light-blue.lighten-5 {
  577. background-color: #e1f5fe !important;
  578. }
  579. .light-blue-text.text-lighten-5 {
  580. color: #e1f5fe !important;
  581. }
  582. .light-blue.lighten-4 {
  583. background-color: #b3e5fc !important;
  584. }
  585. .light-blue-text.text-lighten-4 {
  586. color: #b3e5fc !important;
  587. }
  588. .light-blue.lighten-3 {
  589. background-color: #81d4fa !important;
  590. }
  591. .light-blue-text.text-lighten-3 {
  592. color: #81d4fa !important;
  593. }
  594. .light-blue.lighten-2 {
  595. background-color: #4fc3f7 !important;
  596. }
  597. .light-blue-text.text-lighten-2 {
  598. color: #4fc3f7 !important;
  599. }
  600. .light-blue.lighten-1 {
  601. background-color: #29b6f6 !important;
  602. }
  603. .light-blue-text.text-lighten-1 {
  604. color: #29b6f6 !important;
  605. }
  606. .light-blue.darken-1 {
  607. background-color: #039be5 !important;
  608. }
  609. .light-blue-text.text-darken-1 {
  610. color: #039be5 !important;
  611. }
  612. .light-blue.darken-2 {
  613. background-color: #0288d1 !important;
  614. }
  615. .light-blue-text.text-darken-2 {
  616. color: #0288d1 !important;
  617. }
  618. .light-blue.darken-3 {
  619. background-color: #0277bd !important;
  620. }
  621. .light-blue-text.text-darken-3 {
  622. color: #0277bd !important;
  623. }
  624. .light-blue.darken-4 {
  625. background-color: #01579b !important;
  626. }
  627. .light-blue-text.text-darken-4 {
  628. color: #01579b !important;
  629. }
  630. .light-blue.accent-1 {
  631. background-color: #80d8ff !important;
  632. }
  633. .light-blue-text.text-accent-1 {
  634. color: #80d8ff !important;
  635. }
  636. .light-blue.accent-2 {
  637. background-color: #40c4ff !important;
  638. }
  639. .light-blue-text.text-accent-2 {
  640. color: #40c4ff !important;
  641. }
  642. .light-blue.accent-3 {
  643. background-color: #00b0ff !important;
  644. }
  645. .light-blue-text.text-accent-3 {
  646. color: #00b0ff !important;
  647. }
  648. .light-blue.accent-4 {
  649. background-color: #0091ea !important;
  650. }
  651. .light-blue-text.text-accent-4 {
  652. color: #0091ea !important;
  653. }
  654. .cyan {
  655. background-color: #00bcd4 !important;
  656. }
  657. .cyan-text {
  658. color: #00bcd4 !important;
  659. }
  660. .cyan.lighten-5 {
  661. background-color: #e0f7fa !important;
  662. }
  663. .cyan-text.text-lighten-5 {
  664. color: #e0f7fa !important;
  665. }
  666. .cyan.lighten-4 {
  667. background-color: #b2ebf2 !important;
  668. }
  669. .cyan-text.text-lighten-4 {
  670. color: #b2ebf2 !important;
  671. }
  672. .cyan.lighten-3 {
  673. background-color: #80deea !important;
  674. }
  675. .cyan-text.text-lighten-3 {
  676. color: #80deea !important;
  677. }
  678. .cyan.lighten-2 {
  679. background-color: #4dd0e1 !important;
  680. }
  681. .cyan-text.text-lighten-2 {
  682. color: #4dd0e1 !important;
  683. }
  684. .cyan.lighten-1 {
  685. background-color: #26c6da !important;
  686. }
  687. .cyan-text.text-lighten-1 {
  688. color: #26c6da !important;
  689. }
  690. .cyan.darken-1 {
  691. background-color: #00acc1 !important;
  692. }
  693. .cyan-text.text-darken-1 {
  694. color: #00acc1 !important;
  695. }
  696. .cyan.darken-2 {
  697. background-color: #0097a7 !important;
  698. }
  699. .cyan-text.text-darken-2 {
  700. color: #0097a7 !important;
  701. }
  702. .cyan.darken-3 {
  703. background-color: #00838f !important;
  704. }
  705. .cyan-text.text-darken-3 {
  706. color: #00838f !important;
  707. }
  708. .cyan.darken-4 {
  709. background-color: #006064 !important;
  710. }
  711. .cyan-text.text-darken-4 {
  712. color: #006064 !important;
  713. }
  714. .cyan.accent-1 {
  715. background-color: #84ffff !important;
  716. }
  717. .cyan-text.text-accent-1 {
  718. color: #84ffff !important;
  719. }
  720. .cyan.accent-2 {
  721. background-color: #18ffff !important;
  722. }
  723. .cyan-text.text-accent-2 {
  724. color: #18ffff !important;
  725. }
  726. .cyan.accent-3 {
  727. background-color: #00e5ff !important;
  728. }
  729. .cyan-text.text-accent-3 {
  730. color: #00e5ff !important;
  731. }
  732. .cyan.accent-4 {
  733. background-color: #00b8d4 !important;
  734. }
  735. .cyan-text.text-accent-4 {
  736. color: #00b8d4 !important;
  737. }
  738. .teal {
  739. background-color: #009688 !important;
  740. }
  741. .teal-text {
  742. color: #009688 !important;
  743. }
  744. .teal.lighten-5 {
  745. background-color: #e0f2f1 !important;
  746. }
  747. .teal-text.text-lighten-5 {
  748. color: #e0f2f1 !important;
  749. }
  750. .teal.lighten-4 {
  751. background-color: #b2dfdb !important;
  752. }
  753. .teal-text.text-lighten-4 {
  754. color: #b2dfdb !important;
  755. }
  756. .teal.lighten-3 {
  757. background-color: #80cbc4 !important;
  758. }
  759. .teal-text.text-lighten-3 {
  760. color: #80cbc4 !important;
  761. }
  762. .teal.lighten-2 {
  763. background-color: #4db6ac !important;
  764. }
  765. .teal-text.text-lighten-2 {
  766. color: #4db6ac !important;
  767. }
  768. .teal.lighten-1 {
  769. background-color: #26a69a !important;
  770. }
  771. .teal-text.text-lighten-1 {
  772. color: #26a69a !important;
  773. }
  774. .teal.darken-1 {
  775. background-color: #00897b !important;
  776. }
  777. .teal-text.text-darken-1 {
  778. color: #00897b !important;
  779. }
  780. .teal.darken-2 {
  781. background-color: #00796b !important;
  782. }
  783. .teal-text.text-darken-2 {
  784. color: #00796b !important;
  785. }
  786. .teal.darken-3 {
  787. background-color: #00695c !important;
  788. }
  789. .teal-text.text-darken-3 {
  790. color: #00695c !important;
  791. }
  792. .teal.darken-4 {
  793. background-color: #004d40 !important;
  794. }
  795. .teal-text.text-darken-4 {
  796. color: #004d40 !important;
  797. }
  798. .teal.accent-1 {
  799. background-color: #a7ffeb !important;
  800. }
  801. .teal-text.text-accent-1 {
  802. color: #a7ffeb !important;
  803. }
  804. .teal.accent-2 {
  805. background-color: #64ffda !important;
  806. }
  807. .teal-text.text-accent-2 {
  808. color: #64ffda !important;
  809. }
  810. .teal.accent-3 {
  811. background-color: #1de9b6 !important;
  812. }
  813. .teal-text.text-accent-3 {
  814. color: #1de9b6 !important;
  815. }
  816. .teal.accent-4 {
  817. background-color: #00bfa5 !important;
  818. }
  819. .teal-text.text-accent-4 {
  820. color: #00bfa5 !important;
  821. }
  822. .green {
  823. background-color: #4CAF50 !important;
  824. }
  825. .green-text {
  826. color: #4CAF50 !important;
  827. }
  828. .green.lighten-5 {
  829. background-color: #E8F5E9 !important;
  830. }
  831. .green-text.text-lighten-5 {
  832. color: #E8F5E9 !important;
  833. }
  834. .green.lighten-4 {
  835. background-color: #C8E6C9 !important;
  836. }
  837. .green-text.text-lighten-4 {
  838. color: #C8E6C9 !important;
  839. }
  840. .green.lighten-3 {
  841. background-color: #A5D6A7 !important;
  842. }
  843. .green-text.text-lighten-3 {
  844. color: #A5D6A7 !important;
  845. }
  846. .green.lighten-2 {
  847. background-color: #81C784 !important;
  848. }
  849. .green-text.text-lighten-2 {
  850. color: #81C784 !important;
  851. }
  852. .green.lighten-1 {
  853. background-color: #66BB6A !important;
  854. }
  855. .green-text.text-lighten-1 {
  856. color: #66BB6A !important;
  857. }
  858. .green.darken-1 {
  859. background-color: #43A047 !important;
  860. }
  861. .green-text.text-darken-1 {
  862. color: #43A047 !important;
  863. }
  864. .green.darken-2 {
  865. background-color: #388E3C !important;
  866. }
  867. .green-text.text-darken-2 {
  868. color: #388E3C !important;
  869. }
  870. .green.darken-3 {
  871. background-color: #2E7D32 !important;
  872. }
  873. .green-text.text-darken-3 {
  874. color: #2E7D32 !important;
  875. }
  876. .green.darken-4 {
  877. background-color: #1B5E20 !important;
  878. }
  879. .green-text.text-darken-4 {
  880. color: #1B5E20 !important;
  881. }
  882. .green.accent-1 {
  883. background-color: #B9F6CA !important;
  884. }
  885. .green-text.text-accent-1 {
  886. color: #B9F6CA !important;
  887. }
  888. .green.accent-2 {
  889. background-color: #69F0AE !important;
  890. }
  891. .green-text.text-accent-2 {
  892. color: #69F0AE !important;
  893. }
  894. .green.accent-3 {
  895. background-color: #00E676 !important;
  896. }
  897. .green-text.text-accent-3 {
  898. color: #00E676 !important;
  899. }
  900. .green.accent-4 {
  901. background-color: #00C853 !important;
  902. }
  903. .green-text.text-accent-4 {
  904. color: #00C853 !important;
  905. }
  906. .light-green {
  907. background-color: #8bc34a !important;
  908. }
  909. .light-green-text {
  910. color: #8bc34a !important;
  911. }
  912. .light-green.lighten-5 {
  913. background-color: #f1f8e9 !important;
  914. }
  915. .light-green-text.text-lighten-5 {
  916. color: #f1f8e9 !important;
  917. }
  918. .light-green.lighten-4 {
  919. background-color: #dcedc8 !important;
  920. }
  921. .light-green-text.text-lighten-4 {
  922. color: #dcedc8 !important;
  923. }
  924. .light-green.lighten-3 {
  925. background-color: #c5e1a5 !important;
  926. }
  927. .light-green-text.text-lighten-3 {
  928. color: #c5e1a5 !important;
  929. }
  930. .light-green.lighten-2 {
  931. background-color: #aed581 !important;
  932. }
  933. .light-green-text.text-lighten-2 {
  934. color: #aed581 !important;
  935. }
  936. .light-green.lighten-1 {
  937. background-color: #9ccc65 !important;
  938. }
  939. .light-green-text.text-lighten-1 {
  940. color: #9ccc65 !important;
  941. }
  942. .light-green.darken-1 {
  943. background-color: #7cb342 !important;
  944. }
  945. .light-green-text.text-darken-1 {
  946. color: #7cb342 !important;
  947. }
  948. .light-green.darken-2 {
  949. background-color: #689f38 !important;
  950. }
  951. .light-green-text.text-darken-2 {
  952. color: #689f38 !important;
  953. }
  954. .light-green.darken-3 {
  955. background-color: #558b2f !important;
  956. }
  957. .light-green-text.text-darken-3 {
  958. color: #558b2f !important;
  959. }
  960. .light-green.darken-4 {
  961. background-color: #33691e !important;
  962. }
  963. .light-green-text.text-darken-4 {
  964. color: #33691e !important;
  965. }
  966. .light-green.accent-1 {
  967. background-color: #ccff90 !important;
  968. }
  969. .light-green-text.text-accent-1 {
  970. color: #ccff90 !important;
  971. }
  972. .light-green.accent-2 {
  973. background-color: #b2ff59 !important;
  974. }
  975. .light-green-text.text-accent-2 {
  976. color: #b2ff59 !important;
  977. }
  978. .light-green.accent-3 {
  979. background-color: #76ff03 !important;
  980. }
  981. .light-green-text.text-accent-3 {
  982. color: #76ff03 !important;
  983. }
  984. .light-green.accent-4 {
  985. background-color: #64dd17 !important;
  986. }
  987. .light-green-text.text-accent-4 {
  988. color: #64dd17 !important;
  989. }
  990. .lime {
  991. background-color: #cddc39 !important;
  992. }
  993. .lime-text {
  994. color: #cddc39 !important;
  995. }
  996. .lime.lighten-5 {
  997. background-color: #f9fbe7 !important;
  998. }
  999. .lime-text.text-lighten-5 {
  1000. color: #f9fbe7 !important;
  1001. }
  1002. .lime.lighten-4 {
  1003. background-color: #f0f4c3 !important;
  1004. }
  1005. .lime-text.text-lighten-4 {
  1006. color: #f0f4c3 !important;
  1007. }
  1008. .lime.lighten-3 {
  1009. background-color: #e6ee9c !important;
  1010. }
  1011. .lime-text.text-lighten-3 {
  1012. color: #e6ee9c !important;
  1013. }
  1014. .lime.lighten-2 {
  1015. background-color: #dce775 !important;
  1016. }
  1017. .lime-text.text-lighten-2 {
  1018. color: #dce775 !important;
  1019. }
  1020. .lime.lighten-1 {
  1021. background-color: #d4e157 !important;
  1022. }
  1023. .lime-text.text-lighten-1 {
  1024. color: #d4e157 !important;
  1025. }
  1026. .lime.darken-1 {
  1027. background-color: #c0ca33 !important;
  1028. }
  1029. .lime-text.text-darken-1 {
  1030. color: #c0ca33 !important;
  1031. }
  1032. .lime.darken-2 {
  1033. background-color: #afb42b !important;
  1034. }
  1035. .lime-text.text-darken-2 {
  1036. color: #afb42b !important;
  1037. }
  1038. .lime.darken-3 {
  1039. background-color: #9e9d24 !important;
  1040. }
  1041. .lime-text.text-darken-3 {
  1042. color: #9e9d24 !important;
  1043. }
  1044. .lime.darken-4 {
  1045. background-color: #827717 !important;
  1046. }
  1047. .lime-text.text-darken-4 {
  1048. color: #827717 !important;
  1049. }
  1050. .lime.accent-1 {
  1051. background-color: #f4ff81 !important;
  1052. }
  1053. .lime-text.text-accent-1 {
  1054. color: #f4ff81 !important;
  1055. }
  1056. .lime.accent-2 {
  1057. background-color: #eeff41 !important;
  1058. }
  1059. .lime-text.text-accent-2 {
  1060. color: #eeff41 !important;
  1061. }
  1062. .lime.accent-3 {
  1063. background-color: #c6ff00 !important;
  1064. }
  1065. .lime-text.text-accent-3 {
  1066. color: #c6ff00 !important;
  1067. }
  1068. .lime.accent-4 {
  1069. background-color: #aeea00 !important;
  1070. }
  1071. .lime-text.text-accent-4 {
  1072. color: #aeea00 !important;
  1073. }
  1074. .yellow {
  1075. background-color: #ffeb3b !important;
  1076. }
  1077. .yellow-text {
  1078. color: #ffeb3b !important;
  1079. }
  1080. .yellow.lighten-5 {
  1081. background-color: #fffde7 !important;
  1082. }
  1083. .yellow-text.text-lighten-5 {
  1084. color: #fffde7 !important;
  1085. }
  1086. .yellow.lighten-4 {
  1087. background-color: #fff9c4 !important;
  1088. }
  1089. .yellow-text.text-lighten-4 {
  1090. color: #fff9c4 !important;
  1091. }
  1092. .yellow.lighten-3 {
  1093. background-color: #fff59d !important;
  1094. }
  1095. .yellow-text.text-lighten-3 {
  1096. color: #fff59d !important;
  1097. }
  1098. .yellow.lighten-2 {
  1099. background-color: #fff176 !important;
  1100. }
  1101. .yellow-text.text-lighten-2 {
  1102. color: #fff176 !important;
  1103. }
  1104. .yellow.lighten-1 {
  1105. background-color: #ffee58 !important;
  1106. }
  1107. .yellow-text.text-lighten-1 {
  1108. color: #ffee58 !important;
  1109. }
  1110. .yellow.darken-1 {
  1111. background-color: #fdd835 !important;
  1112. }
  1113. .yellow-text.text-darken-1 {
  1114. color: #fdd835 !important;
  1115. }
  1116. .yellow.darken-2 {
  1117. background-color: #fbc02d !important;
  1118. }
  1119. .yellow-text.text-darken-2 {
  1120. color: #fbc02d !important;
  1121. }
  1122. .yellow.darken-3 {
  1123. background-color: #f9a825 !important;
  1124. }
  1125. .yellow-text.text-darken-3 {
  1126. color: #f9a825 !important;
  1127. }
  1128. .yellow.darken-4 {
  1129. background-color: #f57f17 !important;
  1130. }
  1131. .yellow-text.text-darken-4 {
  1132. color: #f57f17 !important;
  1133. }
  1134. .yellow.accent-1 {
  1135. background-color: #ffff8d !important;
  1136. }
  1137. .yellow-text.text-accent-1 {
  1138. color: #ffff8d !important;
  1139. }
  1140. .yellow.accent-2 {
  1141. background-color: #ffff00 !important;
  1142. }
  1143. .yellow-text.text-accent-2 {
  1144. color: #ffff00 !important;
  1145. }
  1146. .yellow.accent-3 {
  1147. background-color: #ffea00 !important;
  1148. }
  1149. .yellow-text.text-accent-3 {
  1150. color: #ffea00 !important;
  1151. }
  1152. .yellow.accent-4 {
  1153. background-color: #ffd600 !important;
  1154. }
  1155. .yellow-text.text-accent-4 {
  1156. color: #ffd600 !important;
  1157. }
  1158. .amber {
  1159. background-color: #ffc107 !important;
  1160. }
  1161. .amber-text {
  1162. color: #ffc107 !important;
  1163. }
  1164. .amber.lighten-5 {
  1165. background-color: #fff8e1 !important;
  1166. }
  1167. .amber-text.text-lighten-5 {
  1168. color: #fff8e1 !important;
  1169. }
  1170. .amber.lighten-4 {
  1171. background-color: #ffecb3 !important;
  1172. }
  1173. .amber-text.text-lighten-4 {
  1174. color: #ffecb3 !important;
  1175. }
  1176. .amber.lighten-3 {
  1177. background-color: #ffe082 !important;
  1178. }
  1179. .amber-text.text-lighten-3 {
  1180. color: #ffe082 !important;
  1181. }
  1182. .amber.lighten-2 {
  1183. background-color: #ffd54f !important;
  1184. }
  1185. .amber-text.text-lighten-2 {
  1186. color: #ffd54f !important;
  1187. }
  1188. .amber.lighten-1 {
  1189. background-color: #ffca28 !important;
  1190. }
  1191. .amber-text.text-lighten-1 {
  1192. color: #ffca28 !important;
  1193. }
  1194. .amber.darken-1 {
  1195. background-color: #ffb300 !important;
  1196. }
  1197. .amber-text.text-darken-1 {
  1198. color: #ffb300 !important;
  1199. }
  1200. .amber.darken-2 {
  1201. background-color: #ffa000 !important;
  1202. }
  1203. .amber-text.text-darken-2 {
  1204. color: #ffa000 !important;
  1205. }
  1206. .amber.darken-3 {
  1207. background-color: #ff8f00 !important;
  1208. }
  1209. .amber-text.text-darken-3 {
  1210. color: #ff8f00 !important;
  1211. }
  1212. .amber.darken-4 {
  1213. background-color: #ff6f00 !important;
  1214. }
  1215. .amber-text.text-darken-4 {
  1216. color: #ff6f00 !important;
  1217. }
  1218. .amber.accent-1 {
  1219. background-color: #ffe57f !important;
  1220. }
  1221. .amber-text.text-accent-1 {
  1222. color: #ffe57f !important;
  1223. }
  1224. .amber.accent-2 {
  1225. background-color: #ffd740 !important;
  1226. }
  1227. .amber-text.text-accent-2 {
  1228. color: #ffd740 !important;
  1229. }
  1230. .amber.accent-3 {
  1231. background-color: #ffc400 !important;
  1232. }
  1233. .amber-text.text-accent-3 {
  1234. color: #ffc400 !important;
  1235. }
  1236. .amber.accent-4 {
  1237. background-color: #ffab00 !important;
  1238. }
  1239. .amber-text.text-accent-4 {
  1240. color: #ffab00 !important;
  1241. }
  1242. .orange {
  1243. background-color: #ff9800 !important;
  1244. }
  1245. .orange-text {
  1246. color: #ff9800 !important;
  1247. }
  1248. .orange.lighten-5 {
  1249. background-color: #fff3e0 !important;
  1250. }
  1251. .orange-text.text-lighten-5 {
  1252. color: #fff3e0 !important;
  1253. }
  1254. .orange.lighten-4 {
  1255. background-color: #ffe0b2 !important;
  1256. }
  1257. .orange-text.text-lighten-4 {
  1258. color: #ffe0b2 !important;
  1259. }
  1260. .orange.lighten-3 {
  1261. background-color: #ffcc80 !important;
  1262. }
  1263. .orange-text.text-lighten-3 {
  1264. color: #ffcc80 !important;
  1265. }
  1266. .orange.lighten-2 {
  1267. background-color: #ffb74d !important;
  1268. }
  1269. .orange-text.text-lighten-2 {
  1270. color: #ffb74d !important;
  1271. }
  1272. .orange.lighten-1 {
  1273. background-color: #ffa726 !important;
  1274. }
  1275. .orange-text.text-lighten-1 {
  1276. color: #ffa726 !important;
  1277. }
  1278. .orange.darken-1 {
  1279. background-color: #fb8c00 !important;
  1280. }
  1281. .orange-text.text-darken-1 {
  1282. color: #fb8c00 !important;
  1283. }
  1284. .orange.darken-2 {
  1285. background-color: #f57c00 !important;
  1286. }
  1287. .orange-text.text-darken-2 {
  1288. color: #f57c00 !important;
  1289. }
  1290. .orange.darken-3 {
  1291. background-color: #ef6c00 !important;
  1292. }
  1293. .orange-text.text-darken-3 {
  1294. color: #ef6c00 !important;
  1295. }
  1296. .orange.darken-4 {
  1297. background-color: #e65100 !important;
  1298. }
  1299. .orange-text.text-darken-4 {
  1300. color: #e65100 !important;
  1301. }
  1302. .orange.accent-1 {
  1303. background-color: #ffd180 !important;
  1304. }
  1305. .orange-text.text-accent-1 {
  1306. color: #ffd180 !important;
  1307. }
  1308. .orange.accent-2 {
  1309. background-color: #ffab40 !important;
  1310. }
  1311. .orange-text.text-accent-2 {
  1312. color: #ffab40 !important;
  1313. }
  1314. .orange.accent-3 {
  1315. background-color: #ff9100 !important;
  1316. }
  1317. .orange-text.text-accent-3 {
  1318. color: #ff9100 !important;
  1319. }
  1320. .orange.accent-4 {
  1321. background-color: #ff6d00 !important;
  1322. }
  1323. .orange-text.text-accent-4 {
  1324. color: #ff6d00 !important;
  1325. }
  1326. .deep-orange {
  1327. background-color: #ff5722 !important;
  1328. }
  1329. .deep-orange-text {
  1330. color: #ff5722 !important;
  1331. }
  1332. .deep-orange.lighten-5 {
  1333. background-color: #fbe9e7 !important;
  1334. }
  1335. .deep-orange-text.text-lighten-5 {
  1336. color: #fbe9e7 !important;
  1337. }
  1338. .deep-orange.lighten-4 {
  1339. background-color: #ffccbc !important;
  1340. }
  1341. .deep-orange-text.text-lighten-4 {
  1342. color: #ffccbc !important;
  1343. }
  1344. .deep-orange.lighten-3 {
  1345. background-color: #ffab91 !important;
  1346. }
  1347. .deep-orange-text.text-lighten-3 {
  1348. color: #ffab91 !important;
  1349. }
  1350. .deep-orange.lighten-2 {
  1351. background-color: #ff8a65 !important;
  1352. }
  1353. .deep-orange-text.text-lighten-2 {
  1354. color: #ff8a65 !important;
  1355. }
  1356. .deep-orange.lighten-1 {
  1357. background-color: #ff7043 !important;
  1358. }
  1359. .deep-orange-text.text-lighten-1 {
  1360. color: #ff7043 !important;
  1361. }
  1362. .deep-orange.darken-1 {
  1363. background-color: #f4511e !important;
  1364. }
  1365. .deep-orange-text.text-darken-1 {
  1366. color: #f4511e !important;
  1367. }
  1368. .deep-orange.darken-2 {
  1369. background-color: #e64a19 !important;
  1370. }
  1371. .deep-orange-text.text-darken-2 {
  1372. color: #e64a19 !important;
  1373. }
  1374. .deep-orange.darken-3 {
  1375. background-color: #d84315 !important;
  1376. }
  1377. .deep-orange-text.text-darken-3 {
  1378. color: #d84315 !important;
  1379. }
  1380. .deep-orange.darken-4 {
  1381. background-color: #bf360c !important;
  1382. }
  1383. .deep-orange-text.text-darken-4 {
  1384. color: #bf360c !important;
  1385. }
  1386. .deep-orange.accent-1 {
  1387. background-color: #ff9e80 !important;
  1388. }
  1389. .deep-orange-text.text-accent-1 {
  1390. color: #ff9e80 !important;
  1391. }
  1392. .deep-orange.accent-2 {
  1393. background-color: #ff6e40 !important;
  1394. }
  1395. .deep-orange-text.text-accent-2 {
  1396. color: #ff6e40 !important;
  1397. }
  1398. .deep-orange.accent-3 {
  1399. background-color: #ff3d00 !important;
  1400. }
  1401. .deep-orange-text.text-accent-3 {
  1402. color: #ff3d00 !important;
  1403. }
  1404. .deep-orange.accent-4 {
  1405. background-color: #dd2c00 !important;
  1406. }
  1407. .deep-orange-text.text-accent-4 {
  1408. color: #dd2c00 !important;
  1409. }
  1410. .brown {
  1411. background-color: #795548 !important;
  1412. }
  1413. .brown-text {
  1414. color: #795548 !important;
  1415. }
  1416. .brown.lighten-5 {
  1417. background-color: #efebe9 !important;
  1418. }
  1419. .brown-text.text-lighten-5 {
  1420. color: #efebe9 !important;
  1421. }
  1422. .brown.lighten-4 {
  1423. background-color: #d7ccc8 !important;
  1424. }
  1425. .brown-text.text-lighten-4 {
  1426. color: #d7ccc8 !important;
  1427. }
  1428. .brown.lighten-3 {
  1429. background-color: #bcaaa4 !important;
  1430. }
  1431. .brown-text.text-lighten-3 {
  1432. color: #bcaaa4 !important;
  1433. }
  1434. .brown.lighten-2 {
  1435. background-color: #a1887f !important;
  1436. }
  1437. .brown-text.text-lighten-2 {
  1438. color: #a1887f !important;
  1439. }
  1440. .brown.lighten-1 {
  1441. background-color: #8d6e63 !important;
  1442. }
  1443. .brown-text.text-lighten-1 {
  1444. color: #8d6e63 !important;
  1445. }
  1446. .brown.darken-1 {
  1447. background-color: #6d4c41 !important;
  1448. }
  1449. .brown-text.text-darken-1 {
  1450. color: #6d4c41 !important;
  1451. }
  1452. .brown.darken-2 {
  1453. background-color: #5d4037 !important;
  1454. }
  1455. .brown-text.text-darken-2 {
  1456. color: #5d4037 !important;
  1457. }
  1458. .brown.darken-3 {
  1459. background-color: #4e342e !important;
  1460. }
  1461. .brown-text.text-darken-3 {
  1462. color: #4e342e !important;
  1463. }
  1464. .brown.darken-4 {
  1465. background-color: #3e2723 !important;
  1466. }
  1467. .brown-text.text-darken-4 {
  1468. color: #3e2723 !important;
  1469. }
  1470. .blue-grey {
  1471. background-color: #607d8b !important;
  1472. }
  1473. .blue-grey-text {
  1474. color: #607d8b !important;
  1475. }
  1476. .blue-grey.lighten-5 {
  1477. background-color: #eceff1 !important;
  1478. }
  1479. .blue-grey-text.text-lighten-5 {
  1480. color: #eceff1 !important;
  1481. }
  1482. .blue-grey.lighten-4 {
  1483. background-color: #cfd8dc !important;
  1484. }
  1485. .blue-grey-text.text-lighten-4 {
  1486. color: #cfd8dc !important;
  1487. }
  1488. .blue-grey.lighten-3 {
  1489. background-color: #b0bec5 !important;
  1490. }
  1491. .blue-grey-text.text-lighten-3 {
  1492. color: #b0bec5 !important;
  1493. }
  1494. .blue-grey.lighten-2 {
  1495. background-color: #90a4ae !important;
  1496. }
  1497. .blue-grey-text.text-lighten-2 {
  1498. color: #90a4ae !important;
  1499. }
  1500. .blue-grey.lighten-1 {
  1501. background-color: #78909c !important;
  1502. }
  1503. .blue-grey-text.text-lighten-1 {
  1504. color: #78909c !important;
  1505. }
  1506. .blue-grey.darken-1 {
  1507. background-color: #546e7a !important;
  1508. }
  1509. .blue-grey-text.text-darken-1 {
  1510. color: #546e7a !important;
  1511. }
  1512. .blue-grey.darken-2 {
  1513. background-color: #455a64 !important;
  1514. }
  1515. .blue-grey-text.text-darken-2 {
  1516. color: #455a64 !important;
  1517. }
  1518. .blue-grey.darken-3 {
  1519. background-color: #37474f !important;
  1520. }
  1521. .blue-grey-text.text-darken-3 {
  1522. color: #37474f !important;
  1523. }
  1524. .blue-grey.darken-4 {
  1525. background-color: #263238 !important;
  1526. }
  1527. .blue-grey-text.text-darken-4 {
  1528. color: #263238 !important;
  1529. }
  1530. .grey {
  1531. background-color: #9e9e9e !important;
  1532. }
  1533. .grey-text {
  1534. color: #9e9e9e !important;
  1535. }
  1536. .grey.lighten-5 {
  1537. background-color: #fafafa !important;
  1538. }
  1539. .grey-text.text-lighten-5 {
  1540. color: #fafafa !important;
  1541. }
  1542. .grey.lighten-4 {
  1543. background-color: #f5f5f5 !important;
  1544. }
  1545. .grey-text.text-lighten-4 {
  1546. color: #f5f5f5 !important;
  1547. }
  1548. .grey.lighten-3 {
  1549. background-color: #eeeeee !important;
  1550. }
  1551. .grey-text.text-lighten-3 {
  1552. color: #eeeeee !important;
  1553. }
  1554. .grey.lighten-2 {
  1555. background-color: #e0e0e0 !important;
  1556. }
  1557. .grey-text.text-lighten-2 {
  1558. color: #e0e0e0 !important;
  1559. }
  1560. .grey.lighten-1 {
  1561. background-color: #bdbdbd !important;
  1562. }
  1563. .grey-text.text-lighten-1 {
  1564. color: #bdbdbd !important;
  1565. }
  1566. .grey.darken-1 {
  1567. background-color: #757575 !important;
  1568. }
  1569. .grey-text.text-darken-1 {
  1570. color: #757575 !important;
  1571. }
  1572. .grey.darken-2 {
  1573. background-color: #616161 !important;
  1574. }
  1575. .grey-text.text-darken-2 {
  1576. color: #616161 !important;
  1577. }
  1578. .grey.darken-3 {
  1579. background-color: #424242 !important;
  1580. }
  1581. .grey-text.text-darken-3 {
  1582. color: #424242 !important;
  1583. }
  1584. .grey.darken-4 {
  1585. background-color: #212121 !important;
  1586. }
  1587. .grey-text.text-darken-4 {
  1588. color: #212121 !important;
  1589. }
  1590. .black {
  1591. background-color: #000000 !important;
  1592. }
  1593. .black-text {
  1594. color: #000000 !important;
  1595. }
  1596. .white {
  1597. background-color: #FFFFFF !important;
  1598. }
  1599. .white-text {
  1600. color: #FFFFFF !important;
  1601. }
  1602. .transparent {
  1603. background-color: transparent !important;
  1604. }
  1605. .transparent-text {
  1606. color: transparent !important;
  1607. }
  1608. /* ==========================================================================
  1609. Materialize variables
  1610. ========================================================================== */
  1611. /**
  1612. * Table of Contents:
  1613. *
  1614. * 1. Colors
  1615. * 2. Badges
  1616. * 3. Buttons
  1617. * 4. Cards
  1618. * 5. Collapsible
  1619. * 6. Chips
  1620. * 7. Date Picker
  1621. * 8. Dropdown
  1622. * 10. Forms
  1623. * 11. Global
  1624. * 12. Grid
  1625. * 13. Navigation Bar
  1626. * 14. Side Navigation
  1627. * 15. Photo Slider
  1628. * 16. Spinners | Loaders
  1629. * 17. Tabs
  1630. * 18. Tables
  1631. * 19. Toasts
  1632. * 20. Typography
  1633. * 21. Footer
  1634. * 22. Flow Text
  1635. * 23. Collections
  1636. * 24. Progress Bar
  1637. */
  1638. /* 1. Colors
  1639. ========================================================================== */
  1640. /* 2. Badges
  1641. ========================================================================== */
  1642. /* 3. Buttons
  1643. ========================================================================== */
  1644. /* 4. Cards
  1645. ========================================================================== */
  1646. /* 5. Collapsible
  1647. ========================================================================== */
  1648. /* 6. Chips
  1649. ========================================================================== */
  1650. /* 7. Date Picker
  1651. ========================================================================== */
  1652. /* 8. Dropdown
  1653. ========================================================================== */
  1654. /* 9. Fonts
  1655. ========================================================================== */
  1656. /* 10. Forms
  1657. ========================================================================== */
  1658. /* 11. Global
  1659. ========================================================================== */
  1660. /* 12. Grid
  1661. ========================================================================== */
  1662. /* 13. Navigation Bar
  1663. ========================================================================== */
  1664. /* 14. Side Navigation
  1665. ========================================================================== */
  1666. /* 15. Photo Slider
  1667. ========================================================================== */
  1668. /* 16. Spinners | Loaders
  1669. ========================================================================== */
  1670. /* 17. Tabs
  1671. ========================================================================== */
  1672. /* 18. Tables
  1673. ========================================================================== */
  1674. /* 19. Toasts
  1675. ========================================================================== */
  1676. /* 20. Typography
  1677. ========================================================================== */
  1678. /* 21. Footer
  1679. ========================================================================== */
  1680. /* 22. Flow Text
  1681. ========================================================================== */
  1682. /* 23. Collections
  1683. ========================================================================== */
  1684. /* 24. Progress Bar
  1685. ========================================================================== */
  1686. /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
  1687. /**
  1688. * 1. Set default font family to sans-serif.
  1689. * 2. Prevent iOS and IE text size adjust after device orientation change,
  1690. * without disabling user zoom.
  1691. */
  1692. html {
  1693. font-family: sans-serif;
  1694. /* 1 */
  1695. -ms-text-size-adjust: 100%;
  1696. /* 2 */
  1697. -webkit-text-size-adjust: 100%;
  1698. /* 2 */
  1699. }
  1700. /**
  1701. * Remove default margin.
  1702. */
  1703. body {
  1704. margin: 0;
  1705. }
  1706. /* HTML5 display definitions
  1707. ========================================================================== */
  1708. /**
  1709. * Correct `block` display not defined for any HTML5 element in IE 8/9.
  1710. * Correct `block` display not defined for `details` or `summary` in IE 10/11
  1711. * and Firefox.
  1712. * Correct `block` display not defined for `main` in IE 11.
  1713. */
  1714. article,
  1715. aside,
  1716. details,
  1717. figcaption,
  1718. figure,
  1719. footer,
  1720. header,
  1721. hgroup,
  1722. main,
  1723. menu,
  1724. nav,
  1725. section,
  1726. summary {
  1727. display: block;
  1728. }
  1729. /**
  1730. * 1. Correct `inline-block` display not defined in IE 8/9.
  1731. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
  1732. */
  1733. audio,
  1734. canvas,
  1735. progress,
  1736. video {
  1737. display: inline-block;
  1738. /* 1 */
  1739. vertical-align: baseline;
  1740. /* 2 */
  1741. }
  1742. /**
  1743. * Prevent modern browsers from displaying `audio` without controls.
  1744. * Remove excess height in iOS 5 devices.
  1745. */
  1746. audio:not([controls]) {
  1747. display: none;
  1748. height: 0;
  1749. }
  1750. /**
  1751. * Address `[hidden]` styling not present in IE 8/9/10.
  1752. * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
  1753. */
  1754. [hidden],
  1755. template {
  1756. display: none;
  1757. }
  1758. /* Links
  1759. ========================================================================== */
  1760. /**
  1761. * Remove the gray background color from active links in IE 10.
  1762. */
  1763. a {
  1764. background-color: transparent;
  1765. }
  1766. /**
  1767. * Improve readability of focused elements when they are also in an
  1768. * active/hover state.
  1769. */
  1770. a:active,
  1771. a:hover {
  1772. outline: 0;
  1773. }
  1774. /* Text-level semantics
  1775. ========================================================================== */
  1776. /**
  1777. * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
  1778. */
  1779. abbr[title] {
  1780. border-bottom: 1px dotted;
  1781. }
  1782. /**
  1783. * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
  1784. */
  1785. b,
  1786. strong {
  1787. font-weight: bold;
  1788. }
  1789. /**
  1790. * Address styling not present in Safari and Chrome.
  1791. */
  1792. dfn {
  1793. font-style: italic;
  1794. }
  1795. /**
  1796. * Address variable `h1` font-size and margin within `section` and `article`
  1797. * contexts in Firefox 4+, Safari, and Chrome.
  1798. */
  1799. h1 {
  1800. font-size: 2em;
  1801. margin: 0.67em 0;
  1802. }
  1803. /**
  1804. * Address styling not present in IE 8/9.
  1805. */
  1806. mark {
  1807. background: #ff0;
  1808. color: #000;
  1809. }
  1810. /**
  1811. * Address inconsistent and variable font size in all browsers.
  1812. */
  1813. small {
  1814. font-size: 80%;
  1815. }
  1816. /**
  1817. * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  1818. */
  1819. sub,
  1820. sup {
  1821. font-size: 75%;
  1822. line-height: 0;
  1823. position: relative;
  1824. vertical-align: baseline;
  1825. }
  1826. sup {
  1827. top: -0.5em;
  1828. }
  1829. sub {
  1830. bottom: -0.25em;
  1831. }
  1832. /* Embedded content
  1833. ========================================================================== */
  1834. /**
  1835. * Remove border when inside `a` element in IE 8/9/10.
  1836. */
  1837. img {
  1838. border: 0;
  1839. }
  1840. /**
  1841. * Correct overflow not hidden in IE 9/10/11.
  1842. */
  1843. svg:not(:root) {
  1844. overflow: hidden;
  1845. }
  1846. /* Grouping content
  1847. ========================================================================== */
  1848. /**
  1849. * Address margin not present in IE 8/9 and Safari.
  1850. */
  1851. figure {
  1852. margin: 1em 40px;
  1853. }
  1854. /**
  1855. * Address differences between Firefox and other browsers.
  1856. */
  1857. hr {
  1858. box-sizing: content-box;
  1859. height: 0;
  1860. }
  1861. /**
  1862. * Contain overflow in all browsers.
  1863. */
  1864. pre {
  1865. overflow: auto;
  1866. }
  1867. /**
  1868. * Address odd `em`-unit font size rendering in all browsers.
  1869. */
  1870. code,
  1871. kbd,
  1872. pre,
  1873. samp {
  1874. font-family: monospace, monospace;
  1875. font-size: 1em;
  1876. }
  1877. /* Forms
  1878. ========================================================================== */
  1879. /**
  1880. * Known limitation: by default, Chrome and Safari on OS X allow very limited
  1881. * styling of `select`, unless a `border` property is set.
  1882. */
  1883. /**
  1884. * 1. Correct color not being inherited.
  1885. * Known issue: affects color of disabled elements.
  1886. * 2. Correct font properties not being inherited.
  1887. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
  1888. */
  1889. button,
  1890. input,
  1891. optgroup,
  1892. select,
  1893. textarea {
  1894. color: inherit;
  1895. /* 1 */
  1896. font: inherit;
  1897. /* 2 */
  1898. margin: 0;
  1899. /* 3 */
  1900. }
  1901. /**
  1902. * Address `overflow` set to `hidden` in IE 8/9/10/11.
  1903. */
  1904. button {
  1905. overflow: visible;
  1906. }
  1907. /**
  1908. * Address inconsistent `text-transform` inheritance for `button` and `select`.
  1909. * All other form control elements do not inherit `text-transform` values.
  1910. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
  1911. * Correct `select` style inheritance in Firefox.
  1912. */
  1913. button,
  1914. select {
  1915. text-transform: none;
  1916. }
  1917. /**
  1918. * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  1919. * and `video` controls.
  1920. * 2. Correct inability to style clickable `input` types in iOS.
  1921. * 3. Improve usability and consistency of cursor style between image-type
  1922. * `input` and others.
  1923. */
  1924. button,
  1925. html input[type="button"],
  1926. input[type="reset"],
  1927. input[type="submit"] {
  1928. -webkit-appearance: button;
  1929. /* 2 */
  1930. cursor: pointer;
  1931. /* 3 */
  1932. }
  1933. /**
  1934. * Re-set default cursor for disabled elements.
  1935. */
  1936. button[disabled],
  1937. html input[disabled] {
  1938. cursor: default;
  1939. }
  1940. /**
  1941. * Remove inner padding and border in Firefox 4+.
  1942. */
  1943. button::-moz-focus-inner,
  1944. input::-moz-focus-inner {
  1945. border: 0;
  1946. padding: 0;
  1947. }
  1948. /**
  1949. * Address Firefox 4+ setting `line-height` on `input` using `!important` in
  1950. * the UA stylesheet.
  1951. */
  1952. input {
  1953. line-height: normal;
  1954. }
  1955. /**
  1956. * It's recommended that you don't attempt to style these elements.
  1957. * Firefox's implementation doesn't respect box-sizing, padding, or width.
  1958. *
  1959. * 1. Address box sizing set to `content-box` in IE 8/9/10.
  1960. * 2. Remove excess padding in IE 8/9/10.
  1961. */
  1962. input[type="checkbox"],
  1963. input[type="radio"] {
  1964. box-sizing: border-box;
  1965. /* 1 */
  1966. padding: 0;
  1967. /* 2 */
  1968. }
  1969. /**
  1970. * Fix the cursor style for Chrome's increment/decrement buttons. For certain
  1971. * `font-size` values of the `input`, it causes the cursor style of the
  1972. * decrement button to change from `default` to `text`.
  1973. */
  1974. input[type="number"]::-webkit-inner-spin-button,
  1975. input[type="number"]::-webkit-outer-spin-button {
  1976. height: auto;
  1977. }
  1978. /**
  1979. * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
  1980. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
  1981. */
  1982. input[type="search"] {
  1983. -webkit-appearance: textfield;
  1984. /* 1 */
  1985. box-sizing: content-box;
  1986. /* 2 */
  1987. }
  1988. /**
  1989. * Remove inner padding and search cancel button in Safari and Chrome on OS X.
  1990. * Safari (but not Chrome) clips the cancel button when the search input has
  1991. * padding (and `textfield` appearance).
  1992. */
  1993. input[type="search"]::-webkit-search-cancel-button,
  1994. input[type="search"]::-webkit-search-decoration {
  1995. -webkit-appearance: none;
  1996. }
  1997. /**
  1998. * Define consistent border, margin, and padding.
  1999. */
  2000. fieldset {
  2001. border: 1px solid #c0c0c0;
  2002. margin: 0 2px;
  2003. padding: 0.35em 0.625em 0.75em;
  2004. }
  2005. /**
  2006. * 1. Correct `color` not being inherited in IE 8/9/10/11.
  2007. * 2. Remove padding so people aren't caught out if they zero out fieldsets.
  2008. */
  2009. legend {
  2010. border: 0;
  2011. /* 1 */
  2012. padding: 0;
  2013. /* 2 */
  2014. }
  2015. /**
  2016. * Remove default vertical scrollbar in IE 8/9/10/11.
  2017. */
  2018. textarea {
  2019. overflow: auto;
  2020. }
  2021. /**
  2022. * Don't inherit the `font-weight` (applied by a rule above).
  2023. * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
  2024. */
  2025. optgroup {
  2026. font-weight: bold;
  2027. }
  2028. /* Tables
  2029. ========================================================================== */
  2030. /**
  2031. * Remove most spacing between table cells.
  2032. */
  2033. table {
  2034. border-collapse: collapse;
  2035. border-spacing: 0;
  2036. }
  2037. td,
  2038. th {
  2039. padding: 0;
  2040. }
  2041. html {
  2042. box-sizing: border-box;
  2043. }
  2044. *, *:before, *:after {
  2045. box-sizing: inherit;
  2046. }
  2047. ul {
  2048. padding: 0;
  2049. list-style-type: none;
  2050. }
  2051. ul.browser-default,
  2052. ul.browser-default li {
  2053. list-style-type: initial;
  2054. }
  2055. ul li {
  2056. list-style-type: none;
  2057. }
  2058. a {
  2059. color: #039be5;
  2060. text-decoration: none;
  2061. -webkit-tap-highlight-color: transparent;
  2062. }
  2063. .valign-wrapper {
  2064. display: -webkit-flex;
  2065. display: -ms-flexbox;
  2066. display: flex;
  2067. -webkit-align-items: center;
  2068. -ms-flex-align: center;
  2069. align-items: center;
  2070. }
  2071. .valign-wrapper .valign {
  2072. display: block;
  2073. }
  2074. .clearfix {
  2075. clear: both;
  2076. }
  2077. .z-depth-0 {
  2078. box-shadow: none !important;
  2079. }
  2080. .z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-floating, .dropdown-content, .collapsible, .side-nav {
  2081. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  2082. }
  2083. .z-depth-1-half, .btn:hover, .btn-large:hover, .btn-floating:hover {
  2084. box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  2085. }
  2086. .z-depth-2 {
  2087. box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  2088. }
  2089. .z-depth-3 {
  2090. box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  2091. }
  2092. .z-depth-4, .modal {
  2093. box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  2094. }
  2095. .z-depth-5 {
  2096. box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
  2097. }
  2098. .hoverable {
  2099. transition: box-shadow .25s;
  2100. box-shadow: 0;
  2101. }
  2102. .hoverable:hover {
  2103. transition: box-shadow .25s;
  2104. box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  2105. }
  2106. .divider {
  2107. height: 1px;
  2108. overflow: hidden;
  2109. background-color: #e0e0e0;
  2110. }
  2111. blockquote {
  2112. margin: 20px 0;
  2113. padding-left: 1.5rem;
  2114. border-left: 5px solid #ee6e73;
  2115. }
  2116. i {
  2117. line-height: inherit;
  2118. }
  2119. i.left {
  2120. float: left;
  2121. margin-right: 15px;
  2122. }
  2123. i.right {
  2124. float: right;
  2125. margin-left: 15px;
  2126. }
  2127. i.tiny {
  2128. font-size: 1rem;
  2129. }
  2130. i.small {
  2131. font-size: 2rem;
  2132. }
  2133. i.medium {
  2134. font-size: 4rem;
  2135. }
  2136. i.large {
  2137. font-size: 6rem;
  2138. }
  2139. img.responsive-img,
  2140. video.responsive-video {
  2141. max-width: 100%;
  2142. height: auto;
  2143. }
  2144. .pagination li {
  2145. display: inline-block;
  2146. border-radius: 2px;
  2147. text-align: center;
  2148. vertical-align: top;
  2149. height: 30px;
  2150. }
  2151. .pagination li a {
  2152. color: #444;
  2153. display: inline-block;
  2154. font-size: 1.2rem;
  2155. padding: 0 10px;
  2156. line-height: 30px;
  2157. }
  2158. .pagination li.active a {
  2159. color: #fff;
  2160. }
  2161. .pagination li.active {
  2162. background-color: #ee6e73;
  2163. }
  2164. .pagination li.disabled a {
  2165. cursor: default;
  2166. color: #999;
  2167. }
  2168. .pagination li i {
  2169. font-size: 2rem;
  2170. }
  2171. .pagination li.pages ul li {
  2172. display: inline-block;
  2173. float: none;
  2174. }
  2175. @media only screen and (max-width: 992px) {
  2176. .pagination {
  2177. width: 100%;
  2178. }
  2179. .pagination li.prev,
  2180. .pagination li.next {
  2181. width: 10%;
  2182. }
  2183. .pagination li.pages {
  2184. width: 80%;
  2185. overflow: hidden;
  2186. white-space: nowrap;
  2187. }
  2188. }
  2189. .breadcrumb {
  2190. font-size: 18px;
  2191. color: rgba(255, 255, 255, 0.7);
  2192. }
  2193. .breadcrumb i,
  2194. .breadcrumb [class^="mdi-"], .breadcrumb [class*="mdi-"],
  2195. .breadcrumb i.material-icons {
  2196. display: inline-block;
  2197. float: left;
  2198. font-size: 24px;
  2199. }
  2200. .breadcrumb:before {
  2201. content: '\E5CC';
  2202. color: rgba(255, 255, 255, 0.7);
  2203. vertical-align: top;
  2204. display: inline-block;
  2205. font-family: 'Material Icons';
  2206. font-weight: normal;
  2207. font-style: normal;
  2208. font-size: 25px;
  2209. margin: 0 10px 0 8px;
  2210. -webkit-font-smoothing: antialiased;
  2211. }
  2212. .breadcrumb:first-child:before {
  2213. display: none;
  2214. }
  2215. .breadcrumb:last-child {
  2216. color: #fff;
  2217. }
  2218. .parallax-container {
  2219. position: relative;
  2220. overflow: hidden;
  2221. height: 500px;
  2222. }
  2223. .parallax {
  2224. position: absolute;
  2225. top: 0;
  2226. left: 0;
  2227. right: 0;
  2228. bottom: 0;
  2229. z-index: -1;
  2230. }
  2231. .parallax img {
  2232. display: none;
  2233. position: absolute;
  2234. left: 50%;
  2235. bottom: 0;
  2236. min-width: 100%;
  2237. min-height: 100%;
  2238. -webkit-transform: translate3d(0, 0, 0);
  2239. transform: translate3d(0, 0, 0);
  2240. -webkit-transform: translateX(-50%);
  2241. transform: translateX(-50%);
  2242. }
  2243. .pin-top, .pin-bottom {
  2244. position: relative;
  2245. }
  2246. .pinned {
  2247. position: fixed !important;
  2248. }
  2249. /*********************
  2250. Transition Classes
  2251. **********************/
  2252. ul.staggered-list li {
  2253. opacity: 0;
  2254. }
  2255. .fade-in {
  2256. opacity: 0;
  2257. -webkit-transform-origin: 0 50%;
  2258. transform-origin: 0 50%;
  2259. }
  2260. /*********************
  2261. Media Query Classes
  2262. **********************/
  2263. @media only screen and (max-width: 600px) {
  2264. .hide-on-small-only, .hide-on-small-and-down {
  2265. display: none !important;
  2266. }
  2267. }
  2268. @media only screen and (max-width: 992px) {
  2269. .hide-on-med-and-down {
  2270. display: none !important;
  2271. }
  2272. }
  2273. @media only screen and (min-width: 601px) {
  2274. .hide-on-med-and-up {
  2275. display: none !important;
  2276. }
  2277. }
  2278. @media only screen and (min-width: 600px) and (max-width: 992px) {
  2279. .hide-on-med-only {
  2280. display: none !important;
  2281. }
  2282. }
  2283. @media only screen and (min-width: 993px) {
  2284. .hide-on-large-only {
  2285. display: none !important;
  2286. }
  2287. }
  2288. @media only screen and (min-width: 993px) {
  2289. .show-on-large {
  2290. display: block !important;
  2291. }
  2292. }
  2293. @media only screen and (min-width: 600px) and (max-width: 992px) {
  2294. .show-on-medium {
  2295. display: block !important;
  2296. }
  2297. }
  2298. @media only screen and (max-width: 600px) {
  2299. .show-on-small {
  2300. display: block !important;
  2301. }
  2302. }
  2303. @media only screen and (min-width: 601px) {
  2304. .show-on-medium-and-up {
  2305. display: block !important;
  2306. }
  2307. }
  2308. @media only screen and (max-width: 992px) {
  2309. .show-on-medium-and-down {
  2310. display: block !important;
  2311. }
  2312. }
  2313. @media only screen and (max-width: 600px) {
  2314. .center-on-small-only {
  2315. text-align: center;
  2316. }
  2317. }
  2318. footer.page-footer {
  2319. margin-top: 20px;
  2320. padding-top: 20px;
  2321. background-color: #ee6e73;
  2322. }
  2323. footer.page-footer .footer-copyright {
  2324. overflow: hidden;
  2325. height: 50px;
  2326. line-height: 50px;
  2327. color: rgba(255, 255, 255, 0.8);
  2328. background-color: rgba(51, 51, 51, 0.08);
  2329. }
  2330. table, th, td {
  2331. border: none;
  2332. }
  2333. table {
  2334. width: 100%;
  2335. display: table;
  2336. }
  2337. table.bordered > thead > tr,
  2338. table.bordered > tbody > tr {
  2339. border-bottom: 1px solid #d0d0d0;
  2340. }
  2341. table.striped > tbody > tr:nth-child(odd) {
  2342. background-color: #f2f2f2;
  2343. }
  2344. table.striped > tbody > tr > td {
  2345. border-radius: 0;
  2346. }
  2347. table.highlight > tbody > tr {
  2348. transition: background-color .25s ease;
  2349. }
  2350. table.highlight > tbody > tr:hover {
  2351. background-color: #f2f2f2;
  2352. }
  2353. table.centered thead tr th, table.centered tbody tr td {
  2354. text-align: center;
  2355. }
  2356. thead {
  2357. border-bottom: 1px solid #d0d0d0;
  2358. }
  2359. td, th {
  2360. padding: 15px 5px;
  2361. display: table-cell;
  2362. text-align: left;
  2363. vertical-align: middle;
  2364. border-radius: 2px;
  2365. }
  2366. @media only screen and (max-width: 992px) {
  2367. table.responsive-table {
  2368. width: 100%;
  2369. border-collapse: collapse;
  2370. border-spacing: 0;
  2371. display: block;
  2372. position: relative;
  2373. /* sort out borders */
  2374. }
  2375. table.responsive-table td:empty:before {
  2376. content: '\00a0';
  2377. }
  2378. table.responsive-table th,
  2379. table.responsive-table td {
  2380. margin: 0;
  2381. vertical-align: top;
  2382. }
  2383. table.responsive-table th {
  2384. text-align: left;
  2385. }
  2386. table.responsive-table thead {
  2387. display: block;
  2388. float: left;
  2389. }
  2390. table.responsive-table thead tr {
  2391. display: block;
  2392. padding: 0 10px 0 0;
  2393. }
  2394. table.responsive-table thead tr th::before {
  2395. content: "\00a0";
  2396. }
  2397. table.responsive-table tbody {
  2398. display: block;
  2399. width: auto;
  2400. position: relative;
  2401. overflow-x: auto;
  2402. white-space: nowrap;
  2403. }
  2404. table.responsive-table tbody tr {
  2405. display: inline-block;
  2406. vertical-align: top;
  2407. }
  2408. table.responsive-table th {
  2409. display: block;
  2410. text-align: right;
  2411. }
  2412. table.responsive-table td {
  2413. display: block;
  2414. min-height: 1.25em;
  2415. text-align: left;
  2416. }
  2417. table.responsive-table tr {
  2418. padding: 0 10px;
  2419. }
  2420. table.responsive-table thead {
  2421. border: 0;
  2422. border-right: 1px solid #d0d0d0;
  2423. }
  2424. table.responsive-table.bordered th {
  2425. border-bottom: 0;
  2426. border-left: 0;
  2427. }
  2428. table.responsive-table.bordered td {
  2429. border-left: 0;
  2430. border-right: 0;
  2431. border-bottom: 0;
  2432. }
  2433. table.responsive-table.bordered tr {
  2434. border: 0;
  2435. }
  2436. table.responsive-table.bordered tbody tr {
  2437. border-right: 1px solid #d0d0d0;
  2438. }
  2439. }
  2440. .collection {
  2441. margin: 0.5rem 0 1rem 0;
  2442. border: 1px solid #e0e0e0;
  2443. border-radius: 2px;
  2444. overflow: hidden;
  2445. position: relative;
  2446. }
  2447. .collection .collection-item {
  2448. background-color: #fff;
  2449. line-height: 1.5rem;
  2450. padding: 10px 20px;
  2451. margin: 0;
  2452. border-bottom: 1px solid #e0e0e0;
  2453. }
  2454. .collection .collection-item.avatar {
  2455. min-height: 84px;
  2456. padding-left: 72px;
  2457. position: relative;
  2458. }
  2459. .collection .collection-item.avatar .circle {
  2460. position: absolute;
  2461. width: 42px;
  2462. height: 42px;
  2463. overflow: hidden;
  2464. left: 15px;
  2465. display: inline-block;
  2466. vertical-align: middle;
  2467. }
  2468. .collection .collection-item.avatar i.circle {
  2469. font-size: 18px;
  2470. line-height: 42px;
  2471. color: #fff;
  2472. background-color: #999;
  2473. text-align: center;
  2474. }
  2475. .collection .collection-item.avatar .title {
  2476. font-size: 16px;
  2477. }
  2478. .collection .collection-item.avatar p {
  2479. margin: 0;
  2480. }
  2481. .collection .collection-item.avatar .secondary-content {
  2482. position: absolute;
  2483. top: 16px;
  2484. right: 16px;
  2485. }
  2486. .collection .collection-item:last-child {
  2487. border-bottom: none;
  2488. }
  2489. .collection .collection-item.active {
  2490. background-color: #26a69a;
  2491. color: #eafaf9;
  2492. }
  2493. .collection .collection-item.active .secondary-content {
  2494. color: #fff;
  2495. }
  2496. .collection a.collection-item {
  2497. display: block;
  2498. transition: .25s;
  2499. color: #26a69a;
  2500. }
  2501. .collection a.collection-item:not(.active):hover {
  2502. background-color: #ddd;
  2503. }
  2504. .collection.with-header .collection-header {
  2505. background-color: #fff;
  2506. border-bottom: 1px solid #e0e0e0;
  2507. padding: 10px 20px;
  2508. }
  2509. .collection.with-header .collection-item {
  2510. padding-left: 30px;
  2511. }
  2512. .collection.with-header .collection-item.avatar {
  2513. padding-left: 72px;
  2514. }
  2515. .secondary-content {
  2516. float: right;
  2517. color: #26a69a;
  2518. }
  2519. .collapsible .collection {
  2520. margin: 0;
  2521. border: none;
  2522. }
  2523. span.badge {
  2524. min-width: 3rem;
  2525. padding: 0 6px;
  2526. text-align: center;
  2527. font-size: 1rem;
  2528. line-height: inherit;
  2529. color: #757575;
  2530. position: absolute;
  2531. right: 15px;
  2532. box-sizing: border-box;
  2533. }
  2534. span.badge.new {
  2535. font-weight: 300;
  2536. font-size: 0.8rem;
  2537. color: #fff;
  2538. background-color: #26a69a;
  2539. border-radius: 2px;
  2540. }
  2541. span.badge.new:after {
  2542. content: " new";
  2543. }
  2544. span.badge[data-badge-caption]::after {
  2545. content: " " attr(data-badge-caption);
  2546. }
  2547. nav ul a span.badge {
  2548. position: static;
  2549. margin-left: 4px;
  2550. line-height: 0;
  2551. }
  2552. .video-container {
  2553. position: relative;
  2554. padding-bottom: 56.25%;
  2555. height: 0;
  2556. overflow: hidden;
  2557. }
  2558. .video-container iframe, .video-container object, .video-container embed {
  2559. position: absolute;
  2560. top: 0;
  2561. left: 0;
  2562. width: 100%;
  2563. height: 100%;
  2564. }
  2565. .progress {
  2566. position: relative;
  2567. height: 4px;
  2568. display: block;
  2569. width: 100%;
  2570. background-color: #acece6;
  2571. border-radius: 2px;
  2572. margin: 0.5rem 0 1rem 0;
  2573. overflow: hidden;
  2574. }
  2575. .progress .determinate {
  2576. position: absolute;
  2577. top: 0;
  2578. left: 0;
  2579. bottom: 0;
  2580. background-color: #26a69a;
  2581. transition: width .3s linear;
  2582. }
  2583. .progress .indeterminate {
  2584. background-color: #26a69a;
  2585. }
  2586. .progress .indeterminate:before {
  2587. content: '';
  2588. position: absolute;
  2589. background-color: inherit;
  2590. top: 0;
  2591. left: 0;
  2592. bottom: 0;
  2593. will-change: left, right;
  2594. -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  2595. animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  2596. }
  2597. .progress .indeterminate:after {
  2598. content: '';
  2599. position: absolute;
  2600. background-color: inherit;
  2601. top: 0;
  2602. left: 0;
  2603. bottom: 0;
  2604. will-change: left, right;
  2605. -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  2606. animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  2607. -webkit-animation-delay: 1.15s;
  2608. animation-delay: 1.15s;
  2609. }
  2610. @-webkit-keyframes indeterminate {
  2611. 0% {
  2612. left: -35%;
  2613. right: 100%;
  2614. }
  2615. 60% {
  2616. left: 100%;
  2617. right: -90%;
  2618. }
  2619. 100% {
  2620. left: 100%;
  2621. right: -90%;
  2622. }
  2623. }
  2624. @keyframes indeterminate {
  2625. 0% {
  2626. left: -35%;
  2627. right: 100%;
  2628. }
  2629. 60% {
  2630. left: 100%;
  2631. right: -90%;
  2632. }
  2633. 100% {
  2634. left: 100%;
  2635. right: -90%;
  2636. }
  2637. }
  2638. @-webkit-keyframes indeterminate-short {
  2639. 0% {
  2640. left: -200%;
  2641. right: 100%;
  2642. }
  2643. 60% {
  2644. left: 107%;
  2645. right: -8%;
  2646. }
  2647. 100% {
  2648. left: 107%;
  2649. right: -8%;
  2650. }
  2651. }
  2652. @keyframes indeterminate-short {
  2653. 0% {
  2654. left: -200%;
  2655. right: 100%;
  2656. }
  2657. 60% {
  2658. left: 107%;
  2659. right: -8%;
  2660. }
  2661. 100% {
  2662. left: 107%;
  2663. right: -8%;
  2664. }
  2665. }
  2666. /*******************
  2667. Utility Classes
  2668. *******************/
  2669. .hide {
  2670. display: none !important;
  2671. }
  2672. .left-align {
  2673. text-align: left;
  2674. }
  2675. .right-align {
  2676. text-align: right;
  2677. }
  2678. .center, .center-align {
  2679. text-align: center;
  2680. }
  2681. .left {
  2682. float: left !important;
  2683. }
  2684. .right {
  2685. float: right !important;
  2686. }
  2687. .no-select, input[type=range],
  2688. input[type=range] + .thumb {
  2689. -webkit-touch-callout: none;
  2690. -webkit-user-select: none;
  2691. -moz-user-select: none;
  2692. -ms-user-select: none;
  2693. user-select: none;
  2694. }
  2695. .circle {
  2696. border-radius: 50%;
  2697. }
  2698. .center-block {
  2699. display: block;
  2700. margin-left: auto;
  2701. margin-right: auto;
  2702. }
  2703. .truncate {
  2704. display: block;
  2705. white-space: nowrap;
  2706. overflow: hidden;
  2707. text-overflow: ellipsis;
  2708. }
  2709. .no-padding {
  2710. padding: 0 !important;
  2711. }
  2712. /* This is needed for some mobile phones to display the Google Icon font properly */
  2713. .material-icons {
  2714. text-rendering: optimizeLegibility;
  2715. -webkit-font-feature-settings: 'liga';
  2716. -moz-font-feature-settings: 'liga';
  2717. font-feature-settings: 'liga';
  2718. }
  2719. .container {
  2720. margin: 0 auto;
  2721. max-width: 1280px;
  2722. width: 90%;
  2723. }
  2724. @media only screen and (min-width: 601px) {
  2725. .container {
  2726. width: 85%;
  2727. }
  2728. }
  2729. @media only screen and (min-width: 993px) {
  2730. .container {
  2731. width: 70%;
  2732. }
  2733. }
  2734. .container .row {
  2735. margin-left: -0.75rem;
  2736. margin-right: -0.75rem;
  2737. }
  2738. .section {
  2739. padding-top: 1rem;
  2740. padding-bottom: 1rem;
  2741. }
  2742. .section.no-pad {
  2743. padding: 0;
  2744. }
  2745. .section.no-pad-bot {
  2746. padding-bottom: 0;
  2747. }
  2748. .section.no-pad-top {
  2749. padding-top: 0;
  2750. }
  2751. .row {
  2752. margin-left: auto;
  2753. margin-right: auto;
  2754. margin-bottom: 20px;
  2755. }
  2756. .row:after {
  2757. content: "";
  2758. display: table;
  2759. clear: both;
  2760. }
  2761. .row .col {
  2762. float: left;
  2763. box-sizing: border-box;
  2764. padding: 0 0.75rem;
  2765. min-height: 1px;
  2766. }
  2767. .row .col[class*="push-"], .row .col[class*="pull-"] {
  2768. position: relative;
  2769. }
  2770. .row .col.s1 {
  2771. width: 8.3333333333%;
  2772. margin-left: auto;
  2773. left: auto;
  2774. right: auto;
  2775. }
  2776. .row .col.s2 {
  2777. width: 16.6666666667%;
  2778. margin-left: auto;
  2779. left: auto;
  2780. right: auto;
  2781. }
  2782. .row .col.s3 {
  2783. width: 25%;
  2784. margin-left: auto;
  2785. left: auto;
  2786. right: auto;
  2787. }
  2788. .row .col.s4 {
  2789. width: 33.3333333333%;
  2790. margin-left: auto;
  2791. left: auto;
  2792. right: auto;
  2793. }
  2794. .row .col.s5 {
  2795. width: 41.6666666667%;
  2796. margin-left: auto;
  2797. left: auto;
  2798. right: auto;
  2799. }
  2800. .row .col.s6 {
  2801. width: 50%;
  2802. margin-left: auto;
  2803. left: auto;
  2804. right: auto;
  2805. }
  2806. .row .col.s7 {
  2807. width: 58.3333333333%;
  2808. margin-left: auto;
  2809. left: auto;
  2810. right: auto;
  2811. }
  2812. .row .col.s8 {
  2813. width: 66.6666666667%;
  2814. margin-left: auto;
  2815. left: auto;
  2816. right: auto;
  2817. }
  2818. .row .col.s9 {
  2819. width: 75%;
  2820. margin-left: auto;
  2821. left: auto;
  2822. right: auto;
  2823. }
  2824. .row .col.s10 {
  2825. width: 83.3333333333%;
  2826. margin-left: auto;
  2827. left: auto;
  2828. right: auto;
  2829. }
  2830. .row .col.s11 {
  2831. width: 91.6666666667%;
  2832. margin-left: auto;
  2833. left: auto;
  2834. right: auto;
  2835. }
  2836. .row .col.s12 {
  2837. width: 100%;
  2838. margin-left: auto;
  2839. left: auto;
  2840. right: auto;
  2841. }
  2842. .row .col.offset-s1 {
  2843. margin-left: 8.3333333333%;
  2844. }
  2845. .row .col.pull-s1 {
  2846. right: 8.3333333333%;
  2847. }
  2848. .row .col.push-s1 {
  2849. left: 8.3333333333%;
  2850. }
  2851. .row .col.offset-s2 {
  2852. margin-left: 16.6666666667%;
  2853. }
  2854. .row .col.pull-s2 {
  2855. right: 16.6666666667%;
  2856. }
  2857. .row .col.push-s2 {
  2858. left: 16.6666666667%;
  2859. }
  2860. .row .col.offset-s3 {
  2861. margin-left: 25%;
  2862. }
  2863. .row .col.pull-s3 {
  2864. right: 25%;
  2865. }
  2866. .row .col.push-s3 {
  2867. left: 25%;
  2868. }
  2869. .row .col.offset-s4 {
  2870. margin-left: 33.3333333333%;
  2871. }
  2872. .row .col.pull-s4 {
  2873. right: 33.3333333333%;
  2874. }
  2875. .row .col.push-s4 {
  2876. left: 33.3333333333%;
  2877. }
  2878. .row .col.offset-s5 {
  2879. margin-left: 41.6666666667%;
  2880. }
  2881. .row .col.pull-s5 {
  2882. right: 41.6666666667%;
  2883. }
  2884. .row .col.push-s5 {
  2885. left: 41.6666666667%;
  2886. }
  2887. .row .col.offset-s6 {
  2888. margin-left: 50%;
  2889. }
  2890. .row .col.pull-s6 {
  2891. right: 50%;
  2892. }
  2893. .row .col.push-s6 {
  2894. left: 50%;
  2895. }
  2896. .row .col.offset-s7 {
  2897. margin-left: 58.3333333333%;
  2898. }
  2899. .row .col.pull-s7 {
  2900. right: 58.3333333333%;
  2901. }
  2902. .row .col.push-s7 {
  2903. left: 58.3333333333%;
  2904. }
  2905. .row .col.offset-s8 {
  2906. margin-left: 66.6666666667%;
  2907. }
  2908. .row .col.pull-s8 {
  2909. right: 66.6666666667%;
  2910. }
  2911. .row .col.push-s8 {
  2912. left: 66.6666666667%;
  2913. }
  2914. .row .col.offset-s9 {
  2915. margin-left: 75%;
  2916. }
  2917. .row .col.pull-s9 {
  2918. right: 75%;
  2919. }
  2920. .row .col.push-s9 {
  2921. left: 75%;
  2922. }
  2923. .row .col.offset-s10 {
  2924. margin-left: 83.3333333333%;
  2925. }
  2926. .row .col.pull-s10 {
  2927. right: 83.3333333333%;
  2928. }
  2929. .row .col.push-s10 {
  2930. left: 83.3333333333%;
  2931. }
  2932. .row .col.offset-s11 {
  2933. margin-left: 91.6666666667%;
  2934. }
  2935. .row .col.pull-s11 {
  2936. right: 91.6666666667%;
  2937. }
  2938. .row .col.push-s11 {
  2939. left: 91.6666666667%;
  2940. }
  2941. .row .col.offset-s12 {
  2942. margin-left: 100%;
  2943. }
  2944. .row .col.pull-s12 {
  2945. right: 100%;
  2946. }
  2947. .row .col.push-s12 {
  2948. left: 100%;
  2949. }
  2950. @media only screen and (min-width: 601px) {
  2951. .row .col.m1 {
  2952. width: 8.3333333333%;
  2953. margin-left: auto;
  2954. left: auto;
  2955. right: auto;
  2956. }
  2957. .row .col.m2 {
  2958. width: 16.6666666667%;
  2959. margin-left: auto;
  2960. left: auto;
  2961. right: auto;
  2962. }
  2963. .row .col.m3 {
  2964. width: 25%;
  2965. margin-left: auto;
  2966. left: auto;
  2967. right: auto;
  2968. }
  2969. .row .col.m4 {
  2970. width: 33.3333333333%;
  2971. margin-left: auto;
  2972. left: auto;
  2973. right: auto;
  2974. }
  2975. .row .col.m5 {
  2976. width: 41.6666666667%;
  2977. margin-left: auto;
  2978. left: auto;
  2979. right: auto;
  2980. }
  2981. .row .col.m6 {
  2982. width: 50%;
  2983. margin-left: auto;
  2984. left: auto;
  2985. right: auto;
  2986. }
  2987. .row .col.m7 {
  2988. width: 58.3333333333%;
  2989. margin-left: auto;
  2990. left: auto;
  2991. right: auto;
  2992. }
  2993. .row .col.m8 {
  2994. width: 66.6666666667%;
  2995. margin-left: auto;
  2996. left: auto;
  2997. right: auto;
  2998. }
  2999. .row .col.m9 {
  3000. width: 75%;
  3001. margin-left: auto;
  3002. left: auto;
  3003. right: auto;
  3004. }
  3005. .row .col.m10 {
  3006. width: 83.3333333333%;
  3007. margin-left: auto;
  3008. left: auto;
  3009. right: auto;
  3010. }
  3011. .row .col.m11 {
  3012. width: 91.6666666667%;
  3013. margin-left: auto;
  3014. left: auto;
  3015. right: auto;
  3016. }
  3017. .row .col.m12 {
  3018. width: 100%;
  3019. margin-left: auto;
  3020. left: auto;
  3021. right: auto;
  3022. }
  3023. .row .col.offset-m1 {
  3024. margin-left: 8.3333333333%;
  3025. }
  3026. .row .col.pull-m1 {
  3027. right: 8.3333333333%;
  3028. }
  3029. .row .col.push-m1 {
  3030. left: 8.3333333333%;
  3031. }
  3032. .row .col.offset-m2 {
  3033. margin-left: 16.6666666667%;
  3034. }
  3035. .row .col.pull-m2 {
  3036. right: 16.6666666667%;
  3037. }
  3038. .row .col.push-m2 {
  3039. left: 16.6666666667%;
  3040. }
  3041. .row .col.offset-m3 {
  3042. margin-left: 25%;
  3043. }
  3044. .row .col.pull-m3 {
  3045. right: 25%;
  3046. }
  3047. .row .col.push-m3 {
  3048. left: 25%;
  3049. }
  3050. .row .col.offset-m4 {
  3051. margin-left: 33.3333333333%;
  3052. }
  3053. .row .col.pull-m4 {
  3054. right: 33.3333333333%;
  3055. }
  3056. .row .col.push-m4 {
  3057. left: 33.3333333333%;
  3058. }
  3059. .row .col.offset-m5 {
  3060. margin-left: 41.6666666667%;
  3061. }
  3062. .row .col.pull-m5 {
  3063. right: 41.6666666667%;
  3064. }
  3065. .row .col.push-m5 {
  3066. left: 41.6666666667%;
  3067. }
  3068. .row .col.offset-m6 {
  3069. margin-left: 50%;
  3070. }
  3071. .row .col.pull-m6 {
  3072. right: 50%;
  3073. }
  3074. .row .col.push-m6 {
  3075. left: 50%;
  3076. }
  3077. .row .col.offset-m7 {
  3078. margin-left: 58.3333333333%;
  3079. }
  3080. .row .col.pull-m7 {
  3081. right: 58.3333333333%;
  3082. }
  3083. .row .col.push-m7 {
  3084. left: 58.3333333333%;
  3085. }
  3086. .row .col.offset-m8 {
  3087. margin-left: 66.6666666667%;
  3088. }
  3089. .row .col.pull-m8 {
  3090. right: 66.6666666667%;
  3091. }
  3092. .row .col.push-m8 {
  3093. left: 66.6666666667%;
  3094. }
  3095. .row .col.offset-m9 {
  3096. margin-left: 75%;
  3097. }
  3098. .row .col.pull-m9 {
  3099. right: 75%;
  3100. }
  3101. .row .col.push-m9 {
  3102. left: 75%;
  3103. }
  3104. .row .col.offset-m10 {
  3105. margin-left: 83.3333333333%;
  3106. }
  3107. .row .col.pull-m10 {
  3108. right: 83.3333333333%;
  3109. }
  3110. .row .col.push-m10 {
  3111. left: 83.3333333333%;
  3112. }
  3113. .row .col.offset-m11 {
  3114. margin-left: 91.6666666667%;
  3115. }
  3116. .row .col.pull-m11 {
  3117. right: 91.6666666667%;
  3118. }
  3119. .row .col.push-m11 {
  3120. left: 91.6666666667%;
  3121. }
  3122. .row .col.offset-m12 {
  3123. margin-left: 100%;
  3124. }
  3125. .row .col.pull-m12 {
  3126. right: 100%;
  3127. }
  3128. .row .col.push-m12 {
  3129. left: 100%;
  3130. }
  3131. }
  3132. @media only screen and (min-width: 993px) {
  3133. .row .col.l1 {
  3134. width: 8.3333333333%;
  3135. margin-left: auto;
  3136. left: auto;
  3137. right: auto;
  3138. }
  3139. .row .col.l2 {
  3140. width: 16.6666666667%;
  3141. margin-left: auto;
  3142. left: auto;
  3143. right: auto;
  3144. }
  3145. .row .col.l3 {
  3146. width: 25%;
  3147. margin-left: auto;
  3148. left: auto;
  3149. right: auto;
  3150. }
  3151. .row .col.l4 {
  3152. width: 33.3333333333%;
  3153. margin-left: auto;
  3154. left: auto;
  3155. right: auto;
  3156. }
  3157. .row .col.l5 {
  3158. width: 41.6666666667%;
  3159. margin-left: auto;
  3160. left: auto;
  3161. right: auto;
  3162. }
  3163. .row .col.l6 {
  3164. width: 50%;
  3165. margin-left: auto;
  3166. left: auto;
  3167. right: auto;
  3168. }
  3169. .row .col.l7 {
  3170. width: 58.3333333333%;
  3171. margin-left: auto;
  3172. left: auto;
  3173. right: auto;
  3174. }
  3175. .row .col.l8 {
  3176. width: 66.6666666667%;
  3177. margin-left: auto;
  3178. left: auto;
  3179. right: auto;
  3180. }
  3181. .row .col.l9 {
  3182. width: 75%;
  3183. margin-left: auto;
  3184. left: auto;
  3185. right: auto;
  3186. }
  3187. .row .col.l10 {
  3188. width: 83.3333333333%;
  3189. margin-left: auto;
  3190. left: auto;
  3191. right: auto;
  3192. }
  3193. .row .col.l11 {
  3194. width: 91.6666666667%;
  3195. margin-left: auto;
  3196. left: auto;
  3197. right: auto;
  3198. }
  3199. .row .col.l12 {
  3200. width: 100%;
  3201. margin-left: auto;
  3202. left: auto;
  3203. right: auto;
  3204. }
  3205. .row .col.offset-l1 {
  3206. margin-left: 8.3333333333%;
  3207. }
  3208. .row .col.pull-l1 {
  3209. right: 8.3333333333%;
  3210. }
  3211. .row .col.push-l1 {
  3212. left: 8.3333333333%;
  3213. }
  3214. .row .col.offset-l2 {
  3215. margin-left: 16.6666666667%;
  3216. }
  3217. .row .col.pull-l2 {
  3218. right: 16.6666666667%;
  3219. }
  3220. .row .col.push-l2 {
  3221. left: 16.6666666667%;
  3222. }
  3223. .row .col.offset-l3 {
  3224. margin-left: 25%;
  3225. }
  3226. .row .col.pull-l3 {
  3227. right: 25%;
  3228. }
  3229. .row .col.push-l3 {
  3230. left: 25%;
  3231. }
  3232. .row .col.offset-l4 {
  3233. margin-left: 33.3333333333%;
  3234. }
  3235. .row .col.pull-l4 {
  3236. right: 33.3333333333%;
  3237. }
  3238. .row .col.push-l4 {
  3239. left: 33.3333333333%;
  3240. }
  3241. .row .col.offset-l5 {
  3242. margin-left: 41.6666666667%;
  3243. }
  3244. .row .col.pull-l5 {
  3245. right: 41.6666666667%;
  3246. }
  3247. .row .col.push-l5 {
  3248. left: 41.6666666667%;
  3249. }
  3250. .row .col.offset-l6 {
  3251. margin-left: 50%;
  3252. }
  3253. .row .col.pull-l6 {
  3254. right: 50%;
  3255. }
  3256. .row .col.push-l6 {
  3257. left: 50%;
  3258. }
  3259. .row .col.offset-l7 {
  3260. margin-left: 58.3333333333%;
  3261. }
  3262. .row .col.pull-l7 {
  3263. right: 58.3333333333%;
  3264. }
  3265. .row .col.push-l7 {
  3266. left: 58.3333333333%;
  3267. }
  3268. .row .col.offset-l8 {
  3269. margin-left: 66.6666666667%;
  3270. }
  3271. .row .col.pull-l8 {
  3272. right: 66.6666666667%;
  3273. }
  3274. .row .col.push-l8 {
  3275. left: 66.6666666667%;
  3276. }
  3277. .row .col.offset-l9 {
  3278. margin-left: 75%;
  3279. }
  3280. .row .col.pull-l9 {
  3281. right: 75%;
  3282. }
  3283. .row .col.push-l9 {
  3284. left: 75%;
  3285. }
  3286. .row .col.offset-l10 {
  3287. margin-left: 83.3333333333%;
  3288. }
  3289. .row .col.pull-l10 {
  3290. right: 83.3333333333%;
  3291. }
  3292. .row .col.push-l10 {
  3293. left: 83.3333333333%;
  3294. }
  3295. .row .col.offset-l11 {
  3296. margin-left: 91.6666666667%;
  3297. }
  3298. .row .col.pull-l11 {
  3299. right: 91.6666666667%;
  3300. }
  3301. .row .col.push-l11 {
  3302. left: 91.6666666667%;
  3303. }
  3304. .row .col.offset-l12 {
  3305. margin-left: 100%;
  3306. }
  3307. .row .col.pull-l12 {
  3308. right: 100%;
  3309. }
  3310. .row .col.push-l12 {
  3311. left: 100%;
  3312. }
  3313. }
  3314. nav {
  3315. color: #fff;
  3316. background-color: #ee6e73;
  3317. width: 100%;
  3318. height: 56px;
  3319. line-height: 56px;
  3320. }
  3321. nav a {
  3322. color: #fff;
  3323. }
  3324. nav i,
  3325. nav [class^="mdi-"], nav [class*="mdi-"],
  3326. nav i.material-icons {
  3327. display: block;
  3328. font-size: 2rem;
  3329. height: 56px;
  3330. line-height: 56px;
  3331. }
  3332. nav .nav-wrapper {
  3333. position: relative;
  3334. height: 100%;
  3335. }
  3336. @media only screen and (min-width: 993px) {
  3337. nav a.button-collapse {
  3338. display: none;
  3339. }
  3340. }
  3341. nav .button-collapse {
  3342. float: left;
  3343. position: relative;
  3344. z-index: 1;
  3345. height: 56px;
  3346. }
  3347. nav .button-collapse i {
  3348. font-size: 2.7rem;
  3349. height: 56px;
  3350. line-height: 56px;
  3351. }
  3352. nav .brand-logo {
  3353. position: absolute;
  3354. color: #fff;
  3355. display: inline-block;
  3356. font-size: 2.1rem;
  3357. padding: 0;
  3358. white-space: nowrap;
  3359. }
  3360. nav .brand-logo.center {
  3361. left: 50%;
  3362. -webkit-transform: translateX(-50%);
  3363. transform: translateX(-50%);
  3364. }
  3365. @media only screen and (max-width: 992px) {
  3366. nav .brand-logo {
  3367. left: 50%;
  3368. -webkit-transform: translateX(-50%);
  3369. transform: translateX(-50%);
  3370. }
  3371. nav .brand-logo.left, nav .brand-logo.right {
  3372. padding: 0;
  3373. -webkit-transform: none;
  3374. transform: none;
  3375. }
  3376. nav .brand-logo.left {
  3377. left: 0.5rem;
  3378. }
  3379. nav .brand-logo.right {
  3380. right: 0.5rem;
  3381. left: auto;
  3382. }
  3383. }
  3384. nav .brand-logo.right {
  3385. right: 0.5rem;
  3386. padding: 0;
  3387. }
  3388. nav .brand-logo i,
  3389. nav .brand-logo [class^="mdi-"], nav .brand-logo [class*="mdi-"],
  3390. nav .brand-logo i.material-icons {
  3391. float: left;
  3392. margin-right: 15px;
  3393. }
  3394. nav ul {
  3395. margin: 0;
  3396. }
  3397. nav ul li {
  3398. transition: background-color .3s;
  3399. float: left;
  3400. padding: 0;
  3401. }
  3402. nav ul li.active {
  3403. background-color: rgba(0, 0, 0, 0.1);
  3404. }
  3405. nav ul a {
  3406. transition: background-color .3s;
  3407. font-size: 1rem;
  3408. color: #fff;
  3409. display: block;
  3410. padding: 0 15px;
  3411. cursor: pointer;
  3412. }
  3413. nav ul a.btn, nav ul a.btn-large, nav ul a.btn-large, nav ul a.btn-flat, nav ul a.btn-floating {
  3414. margin-top: -2px;
  3415. margin-left: 15px;
  3416. margin-right: 15px;
  3417. }
  3418. nav ul a:hover {
  3419. background-color: rgba(0, 0, 0, 0.1);
  3420. }
  3421. nav ul.left {
  3422. float: left;
  3423. }
  3424. nav form {
  3425. height: 100%;
  3426. }
  3427. nav .input-field {
  3428. margin: 0;
  3429. height: 100%;
  3430. }
  3431. nav .input-field input {
  3432. height: 100%;
  3433. font-size: 1.2rem;
  3434. border: none;
  3435. padding-left: 2rem;
  3436. }
  3437. nav .input-field input:focus, nav .input-field input[type=text]:valid, nav .input-field input[type=password]:valid, nav .input-field input[type=email]:valid, nav .input-field input[type=url]:valid, nav .input-field input[type=date]:valid {
  3438. border: none;
  3439. box-shadow: none;
  3440. }
  3441. nav .input-field label {
  3442. top: 0;
  3443. left: 0;
  3444. }
  3445. nav .input-field label i {
  3446. color: rgba(255, 255, 255, 0.7);
  3447. transition: color .3s;
  3448. }
  3449. nav .input-field label.active i {
  3450. color: #fff;
  3451. }
  3452. nav .input-field label.active {
  3453. -webkit-transform: translateY(0);
  3454. transform: translateY(0);
  3455. }
  3456. .navbar-fixed {
  3457. position: relative;
  3458. height: 56px;
  3459. z-index: 998;
  3460. }
  3461. .navbar-fixed nav {
  3462. position: fixed;
  3463. }
  3464. @media only screen and (min-width: 601px) {
  3465. nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
  3466. height: 64px;
  3467. line-height: 64px;
  3468. }
  3469. .navbar-fixed {
  3470. height: 64px;
  3471. }
  3472. }
  3473. @font-face {
  3474. font-family: "Roboto";
  3475. src: local(Roboto Thin), url("../fonts/roboto/Roboto-Thin.eot");
  3476. src: url("../fonts/roboto/Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../fonts/roboto/Roboto-Thin.woff") format("woff"), url("../fonts/roboto/Roboto-Thin.ttf") format("truetype");
  3477. font-weight: 200;
  3478. }
  3479. @font-face {
  3480. font-family: "Roboto";
  3481. src: local(Roboto Light), url("../fonts/roboto/Roboto-Light.eot");
  3482. src: url("../fonts/roboto/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../fonts/roboto/Roboto-Light.woff") format("woff"), url("../fonts/roboto/Roboto-Light.ttf") format("truetype");
  3483. font-weight: 300;
  3484. }
  3485. @font-face {
  3486. font-family: "Roboto";
  3487. src: local(Roboto Regular), url("../fonts/roboto/Roboto-Regular.eot");
  3488. src: url("../fonts/roboto/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../fonts/roboto/Roboto-Regular.woff") format("woff"), url("../fonts/roboto/Roboto-Regular.ttf") format("truetype");
  3489. font-weight: 400;
  3490. }
  3491. @font-face {
  3492. font-family: "Roboto";
  3493. src: url("../fonts/roboto/Roboto-Medium.eot");
  3494. src: url("../fonts/roboto/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../fonts/roboto/Roboto-Medium.woff") format("woff"), url("../fonts/roboto/Roboto-Medium.ttf") format("truetype");
  3495. font-weight: 500;
  3496. }
  3497. @font-face {
  3498. font-family: "Roboto";
  3499. src: url("../fonts/roboto/Roboto-Bold.eot");
  3500. src: url("../fonts/roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../fonts/roboto/Roboto-Bold.woff") format("woff"), url("../fonts/roboto/Roboto-Bold.ttf") format("truetype");
  3501. font-weight: 700;
  3502. }
  3503. a {
  3504. text-decoration: none;
  3505. }
  3506. html {
  3507. line-height: 1.5;
  3508. font-family: "Roboto", sans-serif;
  3509. font-weight: normal;
  3510. color: rgba(0, 0, 0, 0.87);
  3511. }
  3512. @media only screen and (min-width: 0) {
  3513. html {
  3514. font-size: 14px;
  3515. }
  3516. }
  3517. @media only screen and (min-width: 992px) {
  3518. html {
  3519. font-size: 14.5px;
  3520. }
  3521. }
  3522. @media only screen and (min-width: 1200px) {
  3523. html {
  3524. font-size: 15px;
  3525. }
  3526. }
  3527. h1, h2, h3, h4, h5, h6 {
  3528. font-weight: 400;
  3529. line-height: 1.1;
  3530. }
  3531. h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  3532. font-weight: inherit;
  3533. }
  3534. h1 {
  3535. font-size: 4.2rem;
  3536. line-height: 110%;
  3537. margin: 2.1rem 0 1.68rem 0;
  3538. }
  3539. h2 {
  3540. font-size: 3.56rem;
  3541. line-height: 110%;
  3542. margin: 1.78rem 0 1.424rem 0;
  3543. }
  3544. h3 {
  3545. font-size: 2.92rem;
  3546. line-height: 110%;
  3547. margin: 1.46rem 0 1.168rem 0;
  3548. }
  3549. h4 {
  3550. font-size: 2.28rem;
  3551. line-height: 110%;
  3552. margin: 1.14rem 0 0.912rem 0;
  3553. }
  3554. h5 {
  3555. font-size: 1.64rem;
  3556. line-height: 110%;
  3557. margin: 0.82rem 0 0.656rem 0;
  3558. }
  3559. h6 {
  3560. font-size: 1rem;
  3561. line-height: 110%;
  3562. margin: 0.5rem 0 0.4rem 0;
  3563. }
  3564. em {
  3565. font-style: italic;
  3566. }
  3567. strong {
  3568. font-weight: 500;
  3569. }
  3570. small {
  3571. font-size: 75%;
  3572. }
  3573. .light, footer.page-footer .footer-copyright {
  3574. font-weight: 300;
  3575. }
  3576. .thin {
  3577. font-weight: 200;
  3578. }
  3579. .flow-text {
  3580. font-weight: 300;
  3581. }
  3582. @media only screen and (min-width: 360px) {
  3583. .flow-text {
  3584. font-size: 1.2rem;
  3585. }
  3586. }
  3587. @media only screen and (min-width: 390px) {
  3588. .flow-text {
  3589. font-size: 1.224rem;
  3590. }
  3591. }
  3592. @media only screen and (min-width: 420px) {
  3593. .flow-text {
  3594. font-size: 1.248rem;
  3595. }
  3596. }
  3597. @media only screen and (min-width: 450px) {
  3598. .flow-text {
  3599. font-size: 1.272rem;
  3600. }
  3601. }
  3602. @media only screen and (min-width: 480px) {
  3603. .flow-text {
  3604. font-size: 1.296rem;
  3605. }
  3606. }
  3607. @media only screen and (min-width: 510px) {
  3608. .flow-text {
  3609. font-size: 1.32rem;
  3610. }
  3611. }
  3612. @media only screen and (min-width: 540px) {
  3613. .flow-text {
  3614. font-size: 1.344rem;
  3615. }
  3616. }
  3617. @media only screen and (min-width: 570px) {
  3618. .flow-text {
  3619. font-size: 1.368rem;
  3620. }
  3621. }
  3622. @media only screen and (min-width: 600px) {
  3623. .flow-text {
  3624. font-size: 1.392rem;
  3625. }
  3626. }
  3627. @media only screen and (min-width: 630px) {
  3628. .flow-text {
  3629. font-size: 1.416rem;
  3630. }
  3631. }
  3632. @media only screen and (min-width: 660px) {
  3633. .flow-text {
  3634. font-size: 1.44rem;
  3635. }
  3636. }
  3637. @media only screen and (min-width: 690px) {
  3638. .flow-text {
  3639. font-size: 1.464rem;
  3640. }
  3641. }
  3642. @media only screen and (min-width: 720px) {
  3643. .flow-text {
  3644. font-size: 1.488rem;
  3645. }
  3646. }
  3647. @media only screen and (min-width: 750px) {
  3648. .flow-text {
  3649. font-size: 1.512rem;
  3650. }
  3651. }
  3652. @media only screen and (min-width: 780px) {
  3653. .flow-text {
  3654. font-size: 1.536rem;
  3655. }
  3656. }
  3657. @media only screen and (min-width: 810px) {
  3658. .flow-text {
  3659. font-size: 1.56rem;
  3660. }
  3661. }
  3662. @media only screen and (min-width: 840px) {
  3663. .flow-text {
  3664. font-size: 1.584rem;
  3665. }
  3666. }
  3667. @media only screen and (min-width: 870px) {
  3668. .flow-text {
  3669. font-size: 1.608rem;
  3670. }
  3671. }
  3672. @media only screen and (min-width: 900px) {
  3673. .flow-text {
  3674. font-size: 1.632rem;
  3675. }
  3676. }
  3677. @media only screen and (min-width: 930px) {
  3678. .flow-text {
  3679. font-size: 1.656rem;
  3680. }
  3681. }
  3682. @media only screen and (min-width: 960px) {
  3683. .flow-text {
  3684. font-size: 1.68rem;
  3685. }
  3686. }
  3687. @media only screen and (max-width: 360px) {
  3688. .flow-text {
  3689. font-size: 1.2rem;
  3690. }
  3691. }
  3692. .card-panel {
  3693. transition: box-shadow .25s;
  3694. padding: 20px;
  3695. margin: 0.5rem 0 1rem 0;
  3696. border-radius: 2px;
  3697. background-color: #fff;
  3698. }
  3699. .card {
  3700. position: relative;
  3701. margin: 0.5rem 0 1rem 0;
  3702. background-color: #fff;
  3703. transition: box-shadow .25s;
  3704. border-radius: 2px;
  3705. }
  3706. .card .card-title {
  3707. font-size: 24px;
  3708. font-weight: 300;
  3709. }
  3710. .card .card-title.activator {
  3711. cursor: pointer;
  3712. }
  3713. .card.small, .card.medium, .card.large {
  3714. position: relative;
  3715. }
  3716. .card.small .card-image, .card.medium .card-image, .card.large .card-image {
  3717. max-height: 60%;
  3718. overflow: hidden;
  3719. }
  3720. .card.small .card-image + .card-content, .card.medium .card-image + .card-content, .card.large .card-image + .card-content {
  3721. max-height: 40%;
  3722. }
  3723. .card.small .card-content, .card.medium .card-content, .card.large .card-content {
  3724. max-height: 100%;
  3725. overflow: hidden;
  3726. }
  3727. .card.small .card-action, .card.medium .card-action, .card.large .card-action {
  3728. position: absolute;
  3729. bottom: 0;
  3730. left: 0;
  3731. right: 0;
  3732. }
  3733. .card.small {
  3734. height: 300px;
  3735. }
  3736. .card.medium {
  3737. height: 400px;
  3738. }
  3739. .card.large {
  3740. height: 500px;
  3741. }
  3742. .card.horizontal {
  3743. display: -webkit-flex;
  3744. display: -ms-flexbox;
  3745. display: flex;
  3746. }
  3747. .card.horizontal.small .card-image, .card.horizontal.medium .card-image, .card.horizontal.large .card-image {
  3748. height: 100%;
  3749. max-height: none;
  3750. overflow: visible;
  3751. }
  3752. .card.horizontal.small .card-image img, .card.horizontal.medium .card-image img, .card.horizontal.large .card-image img {
  3753. height: 100%;
  3754. }
  3755. .card.horizontal .card-image {
  3756. max-width: 50%;
  3757. }
  3758. .card.horizontal .card-image img {
  3759. max-width: 100%;
  3760. width: auto;
  3761. }
  3762. .card.horizontal .card-stacked {
  3763. display: -webkit-flex;
  3764. display: -ms-flexbox;
  3765. display: flex;
  3766. -webkit-flex-direction: column;
  3767. -ms-flex-direction: column;
  3768. flex-direction: column;
  3769. -webkit-flex: 1;
  3770. -ms-flex: 1;
  3771. flex: 1;
  3772. position: relative;
  3773. }
  3774. .card.horizontal .card-stacked .card-content {
  3775. -webkit-flex-grow: 1;
  3776. -ms-flex-positive: 1;
  3777. flex-grow: 1;
  3778. }
  3779. .card.sticky-action .card-action {
  3780. z-index: 2;
  3781. }
  3782. .card.sticky-action .card-reveal {
  3783. z-index: 1;
  3784. padding-bottom: 64px;
  3785. }
  3786. .card .card-image {
  3787. position: relative;
  3788. }
  3789. .card .card-image img {
  3790. display: block;
  3791. border-radius: 2px 2px 0 0;
  3792. position: relative;
  3793. left: 0;
  3794. right: 0;
  3795. top: 0;
  3796. bottom: 0;
  3797. width: 100%;
  3798. }
  3799. .card .card-image .card-title {
  3800. color: #fff;
  3801. position: absolute;
  3802. bottom: 0;
  3803. left: 0;
  3804. padding: 20px;
  3805. }
  3806. .card .card-content {
  3807. padding: 20px;
  3808. border-radius: 0 0 2px 2px;
  3809. }
  3810. .card .card-content p {
  3811. margin: 0;
  3812. color: inherit;
  3813. }
  3814. .card .card-content .card-title {
  3815. line-height: 48px;
  3816. }
  3817. .card .card-action {
  3818. position: relative;
  3819. background-color: inherit;
  3820. border-top: 1px solid rgba(160, 160, 160, 0.2);
  3821. padding: 20px;
  3822. }
  3823. .card .card-action a:not(.btn):not(.btn-large):not(.btn-floating) {
  3824. color: #ffab40;
  3825. margin-right: 20px;
  3826. transition: color .3s ease;
  3827. text-transform: uppercase;
  3828. }
  3829. .card .card-action a:not(.btn):not(.btn-large):not(.btn-floating):hover {
  3830. color: #ffd8a6;
  3831. }
  3832. .card .card-reveal {
  3833. padding: 20px;
  3834. position: absolute;
  3835. background-color: #fff;
  3836. width: 100%;
  3837. overflow-y: auto;
  3838. top: 100%;
  3839. height: 100%;
  3840. z-index: 3;
  3841. display: none;
  3842. }
  3843. .card .card-reveal .card-title {
  3844. cursor: pointer;
  3845. display: block;
  3846. }
  3847. #toast-container {
  3848. display: block;
  3849. position: fixed;
  3850. z-index: 10000;
  3851. }
  3852. @media only screen and (max-width: 600px) {
  3853. #toast-container {
  3854. min-width: 100%;
  3855. bottom: 0%;
  3856. }
  3857. }
  3858. @media only screen and (min-width: 601px) and (max-width: 992px) {
  3859. #toast-container {
  3860. left: 5%;
  3861. bottom: 7%;
  3862. max-width: 90%;
  3863. }
  3864. }
  3865. @media only screen and (min-width: 993px) {
  3866. #toast-container {
  3867. top: 10%;
  3868. right: 7%;
  3869. max-width: 86%;
  3870. }
  3871. }
  3872. .toast {
  3873. border-radius: 2px;
  3874. top: 0;
  3875. width: auto;
  3876. clear: both;
  3877. margin-top: 10px;
  3878. position: relative;
  3879. max-width: 100%;
  3880. height: auto;
  3881. min-height: 48px;
  3882. line-height: 1.5em;
  3883. word-break: break-all;
  3884. background-color: #323232;
  3885. padding: 10px 25px;
  3886. font-size: 1.1rem;
  3887. font-weight: 300;
  3888. color: #fff;
  3889. display: -webkit-flex;
  3890. display: -ms-flexbox;
  3891. display: flex;
  3892. -webkit-align-items: center;
  3893. -ms-flex-align: center;
  3894. align-items: center;
  3895. -webkit-justify-content: space-between;
  3896. -ms-flex-pack: justify;
  3897. justify-content: space-between;
  3898. }
  3899. .toast .btn, .toast .btn-large, .toast .btn-flat {
  3900. margin: 0;
  3901. margin-left: 3rem;
  3902. }
  3903. .toast.rounded {
  3904. border-radius: 24px;
  3905. }
  3906. @media only screen and (max-width: 600px) {
  3907. .toast {
  3908. width: 100%;
  3909. border-radius: 0;
  3910. }
  3911. }
  3912. @media only screen and (min-width: 601px) and (max-width: 992px) {
  3913. .toast {
  3914. float: left;
  3915. }
  3916. }
  3917. @media only screen and (min-width: 993px) {
  3918. .toast {
  3919. float: right;
  3920. }
  3921. }
  3922. .tabs {
  3923. display: -webkit-flex;
  3924. display: -ms-flexbox;
  3925. display: flex;
  3926. position: relative;
  3927. overflow-x: auto;
  3928. overflow-y: hidden;
  3929. height: 48px;
  3930. background-color: #fff;
  3931. margin: 0 auto;
  3932. width: 100%;
  3933. white-space: nowrap;
  3934. }
  3935. .tabs .tab {
  3936. -webkit-box-flex: 1;
  3937. -webkit-flex-grow: 1;
  3938. -ms-flex-positive: 1;
  3939. flex-grow: 1;
  3940. display: block;
  3941. float: left;
  3942. text-align: center;
  3943. line-height: 48px;
  3944. height: 48px;
  3945. padding: 0;
  3946. margin: 0;
  3947. text-transform: uppercase;
  3948. text-overflow: ellipsis;
  3949. overflow: hidden;
  3950. letter-spacing: .8px;
  3951. width: 15%;
  3952. min-width: 80px;
  3953. }
  3954. .tabs .tab a {
  3955. color: #ee6e73;
  3956. display: block;
  3957. width: 100%;
  3958. height: 100%;
  3959. text-overflow: ellipsis;
  3960. overflow: hidden;
  3961. transition: color .28s ease;
  3962. }
  3963. .tabs .tab a:hover {
  3964. color: #f9c9cb;
  3965. }
  3966. .tabs .tab.disabled a {
  3967. color: #f9c9cb;
  3968. cursor: default;
  3969. }
  3970. .tabs .indicator {
  3971. position: absolute;
  3972. bottom: 0;
  3973. height: 2px;
  3974. background-color: #f6b2b5;
  3975. will-change: left, right;
  3976. }
  3977. .material-tooltip {
  3978. padding: 10px 8px;
  3979. font-size: 1rem;
  3980. z-index: 2000;
  3981. background-color: transparent;
  3982. border-radius: 2px;
  3983. color: #fff;
  3984. min-height: 36px;
  3985. line-height: 120%;
  3986. opacity: 0;
  3987. display: none;
  3988. position: absolute;
  3989. text-align: center;
  3990. max-width: calc(100% - 4px);
  3991. overflow: hidden;
  3992. left: 0;
  3993. top: 0;
  3994. pointer-events: none;
  3995. }
  3996. .backdrop {
  3997. position: absolute;
  3998. opacity: 0;
  3999. display: none;
  4000. height: 7px;
  4001. width: 14px;
  4002. border-radius: 0 0 50% 50%;
  4003. background-color: #323232;
  4004. z-index: -1;
  4005. -webkit-transform-origin: 50% 0%;
  4006. transform-origin: 50% 0%;
  4007. -webkit-transform: translate3d(0, 0, 0);
  4008. transform: translate3d(0, 0, 0);
  4009. }
  4010. .btn, .btn-large,
  4011. .btn-flat {
  4012. border: none;
  4013. border-radius: 2px;
  4014. display: inline-block;
  4015. height: 36px;
  4016. line-height: 36px;
  4017. outline: 0;
  4018. padding: 0 2rem;
  4019. text-transform: uppercase;
  4020. vertical-align: middle;
  4021. -webkit-tap-highlight-color: transparent;
  4022. }
  4023. .btn.disabled, .disabled.btn-large,
  4024. .btn-floating.disabled,
  4025. .btn-large.disabled,
  4026. .btn:disabled,
  4027. .btn-large:disabled,
  4028. .btn-large:disabled,
  4029. .btn-floating:disabled,
  4030. .btn[disabled],
  4031. [disabled].btn-large,
  4032. .btn-large[disabled],
  4033. .btn-floating[disabled] {
  4034. background-color: #DFDFDF !important;
  4035. box-shadow: none;
  4036. color: #9F9F9F !important;
  4037. cursor: default;
  4038. }
  4039. .btn.disabled *, .disabled.btn-large *,
  4040. .btn-floating.disabled *,
  4041. .btn-large.disabled *,
  4042. .btn:disabled *, .btn-large:disabled *,
  4043. .btn-large:disabled *,
  4044. .btn-floating:disabled *,
  4045. .btn[disabled] *, [disabled].btn-large *,
  4046. .btn-large[disabled] *,
  4047. .btn-floating[disabled] * {
  4048. pointer-events: none;
  4049. }
  4050. .btn.disabled:hover, .disabled.btn-large:hover,
  4051. .btn-floating.disabled:hover,
  4052. .btn-large.disabled:hover,
  4053. .btn:disabled:hover,
  4054. .btn-large:disabled:hover,
  4055. .btn-large:disabled:hover,
  4056. .btn-floating:disabled:hover,
  4057. .btn[disabled]:hover,
  4058. [disabled].btn-large:hover,
  4059. .btn-large[disabled]:hover,
  4060. .btn-floating[disabled]:hover {
  4061. background-color: #DFDFDF !important;
  4062. color: #9F9F9F !important;
  4063. }
  4064. .btn i, .btn-large i,
  4065. .btn-floating i,
  4066. .btn-large i,
  4067. .btn-flat i {
  4068. font-size: 1.3rem;
  4069. line-height: inherit;
  4070. }
  4071. .btn, .btn-large {
  4072. text-decoration: none;
  4073. color: #fff;
  4074. background-color: #26a69a;
  4075. text-align: center;
  4076. letter-spacing: .5px;
  4077. transition: .2s ease-out;
  4078. cursor: pointer;
  4079. }
  4080. .btn:hover, .btn-large:hover {
  4081. background-color: #2bbbad;
  4082. }
  4083. .btn-floating {
  4084. display: inline-block;
  4085. color: #fff;
  4086. position: relative;
  4087. overflow: hidden;
  4088. z-index: 1;
  4089. width: 37px;
  4090. height: 37px;
  4091. line-height: 37px;
  4092. padding: 0;
  4093. background-color: #26a69a;
  4094. border-radius: 50%;
  4095. transition: .3s;
  4096. cursor: pointer;
  4097. vertical-align: middle;
  4098. }
  4099. .btn-floating i {
  4100. width: inherit;
  4101. display: inline-block;
  4102. text-align: center;
  4103. color: #fff;
  4104. font-size: 1.6rem;
  4105. line-height: 37px;
  4106. }
  4107. .btn-floating:hover {
  4108. background-color: #26a69a;
  4109. }
  4110. .btn-floating:before {
  4111. border-radius: 0;
  4112. }
  4113. .btn-floating.btn-large {
  4114. width: 55.5px;
  4115. height: 55.5px;
  4116. }
  4117. .btn-floating.btn-large i {
  4118. line-height: 55.5px;
  4119. }
  4120. button.btn-floating {
  4121. border: none;
  4122. }
  4123. .fixed-action-btn {
  4124. position: fixed;
  4125. right: 23px;
  4126. bottom: 23px;
  4127. padding-top: 15px;
  4128. margin-bottom: 0;
  4129. z-index: 998;
  4130. }
  4131. .fixed-action-btn.active ul {
  4132. visibility: visible;
  4133. }
  4134. .fixed-action-btn.horizontal {
  4135. padding: 0 0 0 15px;
  4136. }
  4137. .fixed-action-btn.horizontal ul {
  4138. text-align: right;
  4139. right: 64px;
  4140. top: 50%;
  4141. -webkit-transform: translateY(-50%);
  4142. transform: translateY(-50%);
  4143. height: 100%;
  4144. left: auto;
  4145. width: 500px;
  4146. /*width 100% only goes to width of button container */
  4147. }
  4148. .fixed-action-btn.horizontal ul li {
  4149. display: inline-block;
  4150. margin: 15px 15px 0 0;
  4151. }
  4152. .fixed-action-btn ul {
  4153. left: 0;
  4154. right: 0;
  4155. text-align: center;
  4156. position: absolute;
  4157. bottom: 64px;
  4158. margin: 0;
  4159. visibility: hidden;
  4160. }
  4161. .fixed-action-btn ul li {
  4162. margin-bottom: 15px;
  4163. }
  4164. .fixed-action-btn ul a.btn-floating {
  4165. opacity: 0;
  4166. }
  4167. .btn-flat {
  4168. box-shadow: none;
  4169. background-color: transparent;
  4170. color: #343434;
  4171. cursor: pointer;
  4172. transition: background-color .2s;
  4173. }
  4174. .btn-flat:focus, .btn-flat:active {
  4175. background-color: transparent;
  4176. }
  4177. .btn-flat:hover {
  4178. background-color: rgba(0, 0, 0, 0.1);
  4179. box-shadow: none;
  4180. }
  4181. .btn-flat.disabled {
  4182. color: #b3b3b3;
  4183. cursor: default;
  4184. }
  4185. .btn-large {
  4186. height: 54px;
  4187. line-height: 54px;
  4188. }
  4189. .btn-large i {
  4190. font-size: 1.6rem;
  4191. }
  4192. .btn-block {
  4193. display: block;
  4194. }
  4195. .dropdown-content {
  4196. background-color: #fff;
  4197. margin: 0;
  4198. display: none;
  4199. min-width: 100px;
  4200. max-height: 650px;
  4201. overflow-y: auto;
  4202. opacity: 0;
  4203. position: absolute;
  4204. z-index: 999;
  4205. will-change: width, height;
  4206. }
  4207. .dropdown-content li {
  4208. clear: both;
  4209. color: rgba(0, 0, 0, 0.87);
  4210. cursor: pointer;
  4211. min-height: 50px;
  4212. line-height: 1.5rem;
  4213. width: 100%;
  4214. text-align: left;
  4215. text-transform: none;
  4216. }
  4217. .dropdown-content li:hover, .dropdown-content li.active, .dropdown-content li.selected {
  4218. background-color: #eee;
  4219. }
  4220. .dropdown-content li.active.selected {
  4221. background-color: #e1e1e1;
  4222. }
  4223. .dropdown-content li.divider {
  4224. min-height: 0;
  4225. height: 1px;
  4226. }
  4227. .dropdown-content li > a, .dropdown-content li > span {
  4228. font-size: 16px;
  4229. color: #26a69a;
  4230. display: block;
  4231. line-height: 22px;
  4232. padding: 14px 16px;
  4233. }
  4234. .dropdown-content li > span > label {
  4235. top: 1px;
  4236. left: 3px;
  4237. height: 18px;
  4238. }
  4239. .dropdown-content li > a > i {
  4240. height: inherit;
  4241. line-height: inherit;
  4242. }
  4243. /*!
  4244. * Waves v0.6.0
  4245. * http://fian.my.id/Waves
  4246. *
  4247. * Copyright 2014 Alfiana E. Sibuea and other contributors
  4248. * Released under the MIT license
  4249. * https://github.com/fians/Waves/blob/master/LICENSE
  4250. */
  4251. .waves-effect {
  4252. position: relative;
  4253. cursor: pointer;
  4254. display: inline-block;
  4255. overflow: hidden;
  4256. -webkit-user-select: none;
  4257. -moz-user-select: none;
  4258. -ms-user-select: none;
  4259. user-select: none;
  4260. -webkit-tap-highlight-color: transparent;
  4261. vertical-align: middle;
  4262. z-index: 1;
  4263. will-change: opacity, transform;
  4264. transition: all .3s ease-out;
  4265. }
  4266. .waves-effect .waves-ripple {
  4267. position: absolute;
  4268. border-radius: 50%;
  4269. width: 20px;
  4270. height: 20px;
  4271. margin-top: -10px;
  4272. margin-left: -10px;
  4273. opacity: 0;
  4274. background: rgba(0, 0, 0, 0.2);
  4275. transition: all 0.7s ease-out;
  4276. transition-property: opacity, -webkit-transform;
  4277. transition-property: transform, opacity;
  4278. transition-property: transform, opacity, -webkit-transform;
  4279. -webkit-transform: scale(0);
  4280. transform: scale(0);
  4281. pointer-events: none;
  4282. }
  4283. .waves-effect.waves-light .waves-ripple {
  4284. background-color: rgba(255, 255, 255, 0.45);
  4285. }
  4286. .waves-effect.waves-red .waves-ripple {
  4287. background-color: rgba(244, 67, 54, 0.7);
  4288. }
  4289. .waves-effect.waves-yellow .waves-ripple {
  4290. background-color: rgba(255, 235, 59, 0.7);
  4291. }
  4292. .waves-effect.waves-orange .waves-ripple {
  4293. background-color: rgba(255, 152, 0, 0.7);
  4294. }
  4295. .waves-effect.waves-purple .waves-ripple {
  4296. background-color: rgba(156, 39, 176, 0.7);
  4297. }
  4298. .waves-effect.waves-green .waves-ripple {
  4299. background-color: rgba(76, 175, 80, 0.7);
  4300. }
  4301. .waves-effect.waves-teal .waves-ripple {
  4302. background-color: rgba(0, 150, 136, 0.7);
  4303. }
  4304. .waves-effect input[type="button"], .waves-effect input[type="reset"], .waves-effect input[type="submit"] {
  4305. border: 0;
  4306. font-style: normal;
  4307. font-size: inherit;
  4308. text-transform: inherit;
  4309. background: none;
  4310. }
  4311. .waves-effect img {
  4312. position: relative;
  4313. z-index: -1;
  4314. }
  4315. .waves-notransition {
  4316. transition: none !important;
  4317. }
  4318. .waves-circle {
  4319. -webkit-transform: translateZ(0);
  4320. transform: translateZ(0);
  4321. -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  4322. }
  4323. .waves-input-wrapper {
  4324. border-radius: 0.2em;
  4325. vertical-align: bottom;
  4326. }
  4327. .waves-input-wrapper .waves-button-input {
  4328. position: relative;
  4329. top: 0;
  4330. left: 0;
  4331. z-index: 1;
  4332. }
  4333. .waves-circle {
  4334. text-align: center;
  4335. width: 2.5em;
  4336. height: 2.5em;
  4337. line-height: 2.5em;
  4338. border-radius: 50%;
  4339. -webkit-mask-image: none;
  4340. }
  4341. .waves-block {
  4342. display: block;
  4343. }
  4344. /* Firefox Bug: link not triggered */
  4345. .waves-effect .waves-ripple {
  4346. z-index: -1;
  4347. }
  4348. .modal {
  4349. display: none;
  4350. position: fixed;
  4351. left: 0;
  4352. right: 0;
  4353. background-color: #fafafa;
  4354. padding: 0;
  4355. max-height: 70%;
  4356. width: 55%;
  4357. margin: auto;
  4358. overflow-y: auto;
  4359. border-radius: 2px;
  4360. will-change: top, opacity;
  4361. }
  4362. @media only screen and (max-width: 992px) {
  4363. .modal {
  4364. width: 80%;
  4365. }
  4366. }
  4367. .modal h1, .modal h2, .modal h3, .modal h4 {
  4368. margin-top: 0;
  4369. }
  4370. .modal .modal-content {
  4371. padding: 24px;
  4372. }
  4373. .modal .modal-close {
  4374. cursor: pointer;
  4375. }
  4376. .modal .modal-footer {
  4377. border-radius: 0 0 2px 2px;
  4378. background-color: #fafafa;
  4379. padding: 4px 6px;
  4380. height: 56px;
  4381. width: 100%;
  4382. }
  4383. .modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-flat {
  4384. float: right;
  4385. margin: 6px 0;
  4386. }
  4387. .lean-overlay {
  4388. position: fixed;
  4389. z-index: 999;
  4390. top: -100px;
  4391. left: 0;
  4392. bottom: 0;
  4393. right: 0;
  4394. height: 125%;
  4395. width: 100%;
  4396. background: #000;
  4397. display: none;
  4398. will-change: opacity;
  4399. }
  4400. .modal.modal-fixed-footer {
  4401. padding: 0;
  4402. height: 70%;
  4403. }
  4404. .modal.modal-fixed-footer .modal-content {
  4405. position: absolute;
  4406. height: calc(100% - 56px);
  4407. max-height: 100%;
  4408. width: 100%;
  4409. overflow-y: auto;
  4410. }
  4411. .modal.modal-fixed-footer .modal-footer {
  4412. border-top: 1px solid rgba(0, 0, 0, 0.1);
  4413. position: absolute;
  4414. bottom: 0;
  4415. }
  4416. .modal.bottom-sheet {
  4417. top: auto;
  4418. bottom: -100%;
  4419. margin: 0;
  4420. width: 100%;
  4421. max-height: 45%;
  4422. border-radius: 0;
  4423. will-change: bottom, opacity;
  4424. }
  4425. .collapsible {
  4426. border-top: 1px solid #ddd;
  4427. border-right: 1px solid #ddd;
  4428. border-left: 1px solid #ddd;
  4429. margin: 0.5rem 0 1rem 0;
  4430. }
  4431. .collapsible-header {
  4432. display: block;
  4433. cursor: pointer;
  4434. min-height: 3rem;
  4435. line-height: 3rem;
  4436. padding: 0 1rem;
  4437. background-color: #fff;
  4438. border-bottom: 1px solid #ddd;
  4439. }
  4440. .collapsible-header i {
  4441. width: 2rem;
  4442. font-size: 1.6rem;
  4443. line-height: 3rem;
  4444. display: block;
  4445. float: left;
  4446. text-align: center;
  4447. margin-right: 1rem;
  4448. }
  4449. .collapsible-body {
  4450. display: none;
  4451. border-bottom: 1px solid #ddd;
  4452. box-sizing: border-box;
  4453. }
  4454. .collapsible-body p {
  4455. margin: 0;
  4456. padding: 2rem;
  4457. }
  4458. .side-nav .collapsible,
  4459. .side-nav.fixed .collapsible {
  4460. border: none;
  4461. box-shadow: none;
  4462. }
  4463. .side-nav .collapsible li,
  4464. .side-nav.fixed .collapsible li {
  4465. padding: 0;
  4466. }
  4467. .side-nav .collapsible-header,
  4468. .side-nav.fixed .collapsible-header {
  4469. background-color: transparent;
  4470. border: none;
  4471. line-height: inherit;
  4472. height: inherit;
  4473. padding: 0 16px;
  4474. }
  4475. .side-nav .collapsible-header:hover,
  4476. .side-nav.fixed .collapsible-header:hover {
  4477. background-color: rgba(0, 0, 0, 0.05);
  4478. }
  4479. .side-nav .collapsible-header i,
  4480. .side-nav.fixed .collapsible-header i {
  4481. line-height: inherit;
  4482. }
  4483. .side-nav .collapsible-body,
  4484. .side-nav.fixed .collapsible-body {
  4485. border: 0;
  4486. background-color: #fff;
  4487. }
  4488. .side-nav .collapsible-body li a,
  4489. .side-nav.fixed .collapsible-body li a {
  4490. padding: 0 23.5px 0 31px;
  4491. }
  4492. .collapsible.popout {
  4493. border: none;
  4494. box-shadow: none;
  4495. }
  4496. .collapsible.popout > li {
  4497. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  4498. margin: 0 24px;
  4499. transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  4500. }
  4501. .collapsible.popout > li.active {
  4502. box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  4503. margin: 16px 0;
  4504. }
  4505. .chip {
  4506. display: inline-block;
  4507. height: 32px;
  4508. font-size: 13px;
  4509. font-weight: 500;
  4510. color: rgba(0, 0, 0, 0.6);
  4511. line-height: 32px;
  4512. padding: 0 12px;
  4513. border-radius: 16px;
  4514. background-color: #e4e4e4;
  4515. margin-bottom: 5px;
  4516. margin-right: 5px;
  4517. }
  4518. .chip img {
  4519. float: left;
  4520. margin: 0 8px 0 -12px;
  4521. height: 32px;
  4522. width: 32px;
  4523. border-radius: 50%;
  4524. }
  4525. .chip .close {
  4526. cursor: pointer;
  4527. float: right;
  4528. font-size: 16px;
  4529. line-height: 32px;
  4530. padding-left: 8px;
  4531. }
  4532. .chips {
  4533. border: none;
  4534. border-bottom: 1px solid #9e9e9e;
  4535. box-shadow: none;
  4536. margin-bottom: 30px;
  4537. min-height: 45px;
  4538. outline: none;
  4539. padding-bottom: 5px;
  4540. transition: all .3s;
  4541. }
  4542. .chips.focus {
  4543. border-bottom: 1px solid #26a69a;
  4544. box-shadow: 0 1px 0 0 #26a69a;
  4545. }
  4546. .chips:hover {
  4547. cursor: text;
  4548. }
  4549. .chips .chip.selected {
  4550. background-color: #26a69a;
  4551. color: #fff;
  4552. }
  4553. .chips .input {
  4554. background: none;
  4555. border: 0;
  4556. color: rgba(0, 0, 0, 0.6);
  4557. display: inline-block;
  4558. font-size: 13px;
  4559. font-weight: 500;
  4560. height: 32px;
  4561. margin-right: 20px;
  4562. line-height: 32px;
  4563. outline: 0;
  4564. padding: 0 !important;
  4565. width: 120px !important;
  4566. }
  4567. .chips .input:focus {
  4568. border: 0 !important;
  4569. box-shadow: none !important;
  4570. }
  4571. .materialboxed {
  4572. display: block;
  4573. cursor: -webkit-zoom-in;
  4574. cursor: zoom-in;
  4575. position: relative;
  4576. transition: opacity .4s;
  4577. }
  4578. .materialboxed:hover {
  4579. will-change: left, top, width, height;
  4580. }
  4581. .materialboxed:hover:not(.active) {
  4582. opacity: .8;
  4583. }
  4584. .materialboxed.active {
  4585. cursor: -webkit-zoom-out;
  4586. cursor: zoom-out;
  4587. }
  4588. #materialbox-overlay {
  4589. position: fixed;
  4590. top: 0;
  4591. left: 0;
  4592. right: 0;
  4593. bottom: 0;
  4594. background-color: #292929;
  4595. z-index: 1000;
  4596. will-change: opacity;
  4597. }
  4598. .materialbox-caption {
  4599. position: fixed;
  4600. display: none;
  4601. color: #fff;
  4602. line-height: 50px;
  4603. bottom: 0;
  4604. width: 100%;
  4605. text-align: center;
  4606. padding: 0% 15%;
  4607. height: 50px;
  4608. z-index: 1000;
  4609. -webkit-font-smoothing: antialiased;
  4610. }
  4611. select:focus {
  4612. outline: 1px solid #c9f3ef;
  4613. }
  4614. button:focus {
  4615. outline: none;
  4616. background-color: #2ab7a9;
  4617. }
  4618. label {
  4619. font-size: 0.8rem;
  4620. color: #9e9e9e;
  4621. }
  4622. /* Text Inputs + Textarea
  4623. ========================================================================== */
  4624. /* Style Placeholders */
  4625. ::-webkit-input-placeholder {
  4626. color: #d1d1d1;
  4627. }
  4628. :-moz-placeholder {
  4629. /* Firefox 18- */
  4630. color: #d1d1d1;
  4631. }
  4632. ::-moz-placeholder {
  4633. /* Firefox 19+ */
  4634. color: #d1d1d1;
  4635. }
  4636. :-ms-input-placeholder {
  4637. color: #d1d1d1;
  4638. }
  4639. /* Text inputs */
  4640. input:not([type]),
  4641. input[type=text],
  4642. input[type=password],
  4643. input[type=email],
  4644. input[type=url],
  4645. input[type=time],
  4646. input[type=date],
  4647. input[type=datetime],
  4648. input[type=datetime-local],
  4649. input[type=tel],
  4650. input[type=number],
  4651. input[type=search],
  4652. textarea.materialize-textarea {
  4653. background-color: transparent;
  4654. border: none;
  4655. border-bottom: 1px solid #9e9e9e;
  4656. border-radius: 0;
  4657. outline: none;
  4658. height: 3rem;
  4659. width: 100%;
  4660. font-size: 1rem;
  4661. margin: 0 0 20px 0;
  4662. padding: 0;
  4663. box-shadow: none;
  4664. box-sizing: content-box;
  4665. transition: all 0.3s;
  4666. }
  4667. input:not([type]):disabled, input:not([type])[readonly="readonly"],
  4668. input[type=text]:disabled,
  4669. input[type=text][readonly="readonly"],
  4670. input[type=password]:disabled,
  4671. input[type=password][readonly="readonly"],
  4672. input[type=email]:disabled,
  4673. input[type=email][readonly="readonly"],
  4674. input[type=url]:disabled,
  4675. input[type=url][readonly="readonly"],
  4676. input[type=time]:disabled,
  4677. input[type=time][readonly="readonly"],
  4678. input[type=date]:disabled,
  4679. input[type=date][readonly="readonly"],
  4680. input[type=datetime]:disabled,
  4681. input[type=datetime][readonly="readonly"],
  4682. input[type=datetime-local]:disabled,
  4683. input[type=datetime-local][readonly="readonly"],
  4684. input[type=tel]:disabled,
  4685. input[type=tel][readonly="readonly"],
  4686. input[type=number]:disabled,
  4687. input[type=number][readonly="readonly"],
  4688. input[type=search]:disabled,
  4689. input[type=search][readonly="readonly"],
  4690. textarea.materialize-textarea:disabled,
  4691. textarea.materialize-textarea[readonly="readonly"] {
  4692. color: rgba(0, 0, 0, 0.26);
  4693. border-bottom: 1px dotted rgba(0, 0, 0, 0.26);
  4694. }
  4695. input:not([type]):disabled + label,
  4696. input:not([type])[readonly="readonly"] + label,
  4697. input[type=text]:disabled + label,
  4698. input[type=text][readonly="readonly"] + label,
  4699. input[type=password]:disabled + label,
  4700. input[type=password][readonly="readonly"] + label,
  4701. input[type=email]:disabled + label,
  4702. input[type=email][readonly="readonly"] + label,
  4703. input[type=url]:disabled + label,
  4704. input[type=url][readonly="readonly"] + label,
  4705. input[type=time]:disabled + label,
  4706. input[type=time][readonly="readonly"] + label,
  4707. input[type=date]:disabled + label,
  4708. input[type=date][readonly="readonly"] + label,
  4709. input[type=datetime]:disabled + label,
  4710. input[type=datetime][readonly="readonly"] + label,
  4711. input[type=datetime-local]:disabled + label,
  4712. input[type=datetime-local][readonly="readonly"] + label,
  4713. input[type=tel]:disabled + label,
  4714. input[type=tel][readonly="readonly"] + label,
  4715. input[type=number]:disabled + label,
  4716. input[type=number][readonly="readonly"] + label,
  4717. input[type=search]:disabled + label,
  4718. input[type=search][readonly="readonly"] + label,
  4719. textarea.materialize-textarea:disabled + label,
  4720. textarea.materialize-textarea[readonly="readonly"] + label {
  4721. color: rgba(0, 0, 0, 0.26);
  4722. }
  4723. input:not([type]):focus:not([readonly]),
  4724. input[type=text]:focus:not([readonly]),
  4725. input[type=password]:focus:not([readonly]),
  4726. input[type=email]:focus:not([readonly]),
  4727. input[type=url]:focus:not([readonly]),
  4728. input[type=time]:focus:not([readonly]),
  4729. input[type=date]:focus:not([readonly]),
  4730. input[type=datetime]:focus:not([readonly]),
  4731. input[type=datetime-local]:focus:not([readonly]),
  4732. input[type=tel]:focus:not([readonly]),
  4733. input[type=number]:focus:not([readonly]),
  4734. input[type=search]:focus:not([readonly]),
  4735. textarea.materialize-textarea:focus:not([readonly]) {
  4736. border-bottom: 1px solid #26a69a;
  4737. box-shadow: 0 1px 0 0 #26a69a;
  4738. }
  4739. input:not([type]):focus:not([readonly]) + label,
  4740. input[type=text]:focus:not([readonly]) + label,
  4741. input[type=password]:focus:not([readonly]) + label,
  4742. input[type=email]:focus:not([readonly]) + label,
  4743. input[type=url]:focus:not([readonly]) + label,
  4744. input[type=time]:focus:not([readonly]) + label,
  4745. input[type=date]:focus:not([readonly]) + label,
  4746. input[type=datetime]:focus:not([readonly]) + label,
  4747. input[type=datetime-local]:focus:not([readonly]) + label,
  4748. input[type=tel]:focus:not([readonly]) + label,
  4749. input[type=number]:focus:not([readonly]) + label,
  4750. input[type=search]:focus:not([readonly]) + label,
  4751. textarea.materialize-textarea:focus:not([readonly]) + label {
  4752. color: #26a69a;
  4753. }
  4754. input:not([type]).valid, input:not([type]):focus.valid,
  4755. input[type=text].valid,
  4756. input[type=text]:focus.valid,
  4757. input[type=password].valid,
  4758. input[type=password]:focus.valid,
  4759. input[type=email].valid,
  4760. input[type=email]:focus.valid,
  4761. input[type=url].valid,
  4762. input[type=url]:focus.valid,
  4763. input[type=time].valid,
  4764. input[type=time]:focus.valid,
  4765. input[type=date].valid,
  4766. input[type=date]:focus.valid,
  4767. input[type=datetime].valid,
  4768. input[type=datetime]:focus.valid,
  4769. input[type=datetime-local].valid,
  4770. input[type=datetime-local]:focus.valid,
  4771. input[type=tel].valid,
  4772. input[type=tel]:focus.valid,
  4773. input[type=number].valid,
  4774. input[type=number]:focus.valid,
  4775. input[type=search].valid,
  4776. input[type=search]:focus.valid,
  4777. textarea.materialize-textarea.valid,
  4778. textarea.materialize-textarea:focus.valid {
  4779. border-bottom: 1px solid #4CAF50;
  4780. box-shadow: 0 1px 0 0 #4CAF50;
  4781. }
  4782. input:not([type]).valid + label:after,
  4783. input:not([type]):focus.valid + label:after,
  4784. input[type=text].valid + label:after,
  4785. input[type=text]:focus.valid + label:after,
  4786. input[type=password].valid + label:after,
  4787. input[type=password]:focus.valid + label:after,
  4788. input[type=email].valid + label:after,
  4789. input[type=email]:focus.valid + label:after,
  4790. input[type=url].valid + label:after,
  4791. input[type=url]:focus.valid + label:after,
  4792. input[type=time].valid + label:after,
  4793. input[type=time]:focus.valid + label:after,
  4794. input[type=date].valid + label:after,
  4795. input[type=date]:focus.valid + label:after,
  4796. input[type=datetime].valid + label:after,
  4797. input[type=datetime]:focus.valid + label:after,
  4798. input[type=datetime-local].valid + label:after,
  4799. input[type=datetime-local]:focus.valid + label:after,
  4800. input[type=tel].valid + label:after,
  4801. input[type=tel]:focus.valid + label:after,
  4802. input[type=number].valid + label:after,
  4803. input[type=number]:focus.valid + label:after,
  4804. input[type=search].valid + label:after,
  4805. input[type=search]:focus.valid + label:after,
  4806. textarea.materialize-textarea.valid + label:after,
  4807. textarea.materialize-textarea:focus.valid + label:after {
  4808. content: attr(data-success);
  4809. color: #4CAF50;
  4810. opacity: 1;
  4811. }
  4812. input:not([type]).invalid, input:not([type]):focus.invalid,
  4813. input[type=text].invalid,
  4814. input[type=text]:focus.invalid,
  4815. input[type=password].invalid,
  4816. input[type=password]:focus.invalid,
  4817. input[type=email].invalid,
  4818. input[type=email]:focus.invalid,
  4819. input[type=url].invalid,
  4820. input[type=url]:focus.invalid,
  4821. input[type=time].invalid,
  4822. input[type=time]:focus.invalid,
  4823. input[type=date].invalid,
  4824. input[type=date]:focus.invalid,
  4825. input[type=datetime].invalid,
  4826. input[type=datetime]:focus.invalid,
  4827. input[type=datetime-local].invalid,
  4828. input[type=datetime-local]:focus.invalid,
  4829. input[type=tel].invalid,
  4830. input[type=tel]:focus.invalid,
  4831. input[type=number].invalid,
  4832. input[type=number]:focus.invalid,
  4833. input[type=search].invalid,
  4834. input[type=search]:focus.invalid,
  4835. textarea.materialize-textarea.invalid,
  4836. textarea.materialize-textarea:focus.invalid {
  4837. border-bottom: 1px solid #F44336;
  4838. box-shadow: 0 1px 0 0 #F44336;
  4839. }
  4840. input:not([type]).invalid + label:after,
  4841. input:not([type]):focus.invalid + label:after,
  4842. input[type=text].invalid + label:after,
  4843. input[type=text]:focus.invalid + label:after,
  4844. input[type=password].invalid + label:after,
  4845. input[type=password]:focus.invalid + label:after,
  4846. input[type=email].invalid + label:after,
  4847. input[type=email]:focus.invalid + label:after,
  4848. input[type=url].invalid + label:after,
  4849. input[type=url]:focus.invalid + label:after,
  4850. input[type=time].invalid + label:after,
  4851. input[type=time]:focus.invalid + label:after,
  4852. input[type=date].invalid + label:after,
  4853. input[type=date]:focus.invalid + label:after,
  4854. input[type=datetime].invalid + label:after,
  4855. input[type=datetime]:focus.invalid + label:after,
  4856. input[type=datetime-local].invalid + label:after,
  4857. input[type=datetime-local]:focus.invalid + label:after,
  4858. input[type=tel].invalid + label:after,
  4859. input[type=tel]:focus.invalid + label:after,
  4860. input[type=number].invalid + label:after,
  4861. input[type=number]:focus.invalid + label:after,
  4862. input[type=search].invalid + label:after,
  4863. input[type=search]:focus.invalid + label:after,
  4864. textarea.materialize-textarea.invalid + label:after,
  4865. textarea.materialize-textarea:focus.invalid + label:after {
  4866. content: attr(data-error);
  4867. color: #F44336;
  4868. opacity: 1;
  4869. }
  4870. input:not([type]).validate + label,
  4871. input[type=text].validate + label,
  4872. input[type=password].validate + label,
  4873. input[type=email].validate + label,
  4874. input[type=url].validate + label,
  4875. input[type=time].validate + label,
  4876. input[type=date].validate + label,
  4877. input[type=datetime].validate + label,
  4878. input[type=datetime-local].validate + label,
  4879. input[type=tel].validate + label,
  4880. input[type=number].validate + label,
  4881. input[type=search].validate + label,
  4882. textarea.materialize-textarea.validate + label {
  4883. width: 100%;
  4884. pointer-events: none;
  4885. }
  4886. input:not([type]) + label:after,
  4887. input[type=text] + label:after,
  4888. input[type=password] + label:after,
  4889. input[type=email] + label:after,
  4890. input[type=url] + label:after,
  4891. input[type=time] + label:after,
  4892. input[type=date] + label:after,
  4893. input[type=datetime] + label:after,
  4894. input[type=datetime-local] + label:after,
  4895. input[type=tel] + label:after,
  4896. input[type=number] + label:after,
  4897. input[type=search] + label:after,
  4898. textarea.materialize-textarea + label:after {
  4899. display: block;
  4900. content: "";
  4901. position: absolute;
  4902. top: 60px;
  4903. opacity: 0;
  4904. transition: .2s opacity ease-out, .2s color ease-out;
  4905. }
  4906. .input-field {
  4907. position: relative;
  4908. margin-top: 1rem;
  4909. }
  4910. .input-field.col label {
  4911. left: 0.75rem;
  4912. }
  4913. .input-field.col .prefix ~ label,
  4914. .input-field.col .prefix ~ .validate ~ label {
  4915. width: calc(100% - 3rem - 1.5rem);
  4916. }
  4917. .input-field label {
  4918. color: #9e9e9e;
  4919. position: absolute;
  4920. top: 0.8rem;
  4921. font-size: 1rem;
  4922. cursor: text;
  4923. transition: .2s ease-out;
  4924. }
  4925. .input-field label.active {
  4926. font-size: 0.8rem;
  4927. -webkit-transform: translateY(-140%);
  4928. transform: translateY(-140%);
  4929. }
  4930. .input-field .prefix {
  4931. position: absolute;
  4932. width: 3rem;
  4933. font-size: 2rem;
  4934. transition: color .2s;
  4935. }
  4936. .input-field .prefix.active {
  4937. color: #26a69a;
  4938. }
  4939. .input-field .prefix ~ input,
  4940. .input-field .prefix ~ textarea,
  4941. .input-field .prefix ~ label,
  4942. .input-field .prefix ~ .validate ~ label,
  4943. .input-field .prefix ~ .autocomplete-content {
  4944. margin-left: 3rem;
  4945. width: 92%;
  4946. width: calc(100% - 3rem);
  4947. }
  4948. .input-field .prefix ~ label {
  4949. margin-left: 3rem;
  4950. }
  4951. @media only screen and (max-width: 992px) {
  4952. .input-field .prefix ~ input {
  4953. width: 86%;
  4954. width: calc(100% - 3rem);
  4955. }
  4956. }
  4957. @media only screen and (max-width: 600px) {
  4958. .input-field .prefix ~ input {
  4959. width: 80%;
  4960. width: calc(100% - 3rem);
  4961. }
  4962. }
  4963. /* Search Field */
  4964. .input-field input[type=search] {
  4965. display: block;
  4966. line-height: inherit;
  4967. padding-left: 4rem;
  4968. width: calc(100% - 4rem);
  4969. }
  4970. .input-field input[type=search]:focus {
  4971. background-color: #fff;
  4972. border: 0;
  4973. box-shadow: none;
  4974. color: #444;
  4975. }
  4976. .input-field input[type=search]:focus + label i,
  4977. .input-field input[type=search]:focus ~ .mdi-navigation-close,
  4978. .input-field input[type=search]:focus ~ .material-icons {
  4979. color: #444;
  4980. }
  4981. .input-field input[type=search] + label {
  4982. left: 1rem;
  4983. }
  4984. .input-field input[type=search] ~ .mdi-navigation-close,
  4985. .input-field input[type=search] ~ .material-icons {
  4986. position: absolute;
  4987. top: 0;
  4988. right: 1rem;
  4989. color: transparent;
  4990. cursor: pointer;
  4991. font-size: 2rem;
  4992. transition: .3s color;
  4993. }
  4994. /* Textarea */
  4995. textarea {
  4996. width: 100%;
  4997. height: 3rem;
  4998. background-color: transparent;
  4999. }
  5000. textarea.materialize-textarea {
  5001. overflow-y: hidden;
  5002. /* prevents scroll bar flash */
  5003. padding: .8rem 0 1.6rem 0;
  5004. /* prevents text jump on Enter keypress */
  5005. resize: none;
  5006. min-height: 3rem;
  5007. }
  5008. .hiddendiv {
  5009. display: none;
  5010. white-space: pre-wrap;
  5011. word-wrap: break-word;
  5012. overflow-wrap: break-word;
  5013. /* future version of deprecated 'word-wrap' */
  5014. padding-top: 1.2rem;
  5015. /* prevents text jump on Enter keypress */
  5016. }
  5017. /* Autocomplete */
  5018. .autocomplete-content {
  5019. margin-top: -15px;
  5020. display: block;
  5021. opacity: 1;
  5022. position: static;
  5023. }
  5024. .autocomplete-content li .highlight {
  5025. color: #444;
  5026. }
  5027. .autocomplete-content li img {
  5028. height: 40px;
  5029. width: 40px;
  5030. margin: 5px 15px;
  5031. }
  5032. /* Radio Buttons
  5033. ========================================================================== */
  5034. [type="radio"]:not(:checked),
  5035. [type="radio"]:checked {
  5036. position: absolute;
  5037. left: -9999px;
  5038. opacity: 0;
  5039. }
  5040. [type="radio"]:not(:checked) + label,
  5041. [type="radio"]:checked + label {
  5042. position: relative;
  5043. padding-left: 35px;
  5044. cursor: pointer;
  5045. display: inline-block;
  5046. height: 25px;
  5047. line-height: 25px;
  5048. font-size: 1rem;
  5049. transition: .28s ease;
  5050. /* webkit (konqueror) browsers */
  5051. -webkit-user-select: none;
  5052. -moz-user-select: none;
  5053. -ms-user-select: none;
  5054. user-select: none;
  5055. }
  5056. [type="radio"] + label:before,
  5057. [type="radio"] + label:after {
  5058. content: '';
  5059. position: absolute;
  5060. left: 0;
  5061. top: 0;
  5062. margin: 4px;
  5063. width: 16px;
  5064. height: 16px;
  5065. z-index: 0;
  5066. transition: .28s ease;
  5067. }
  5068. /* Unchecked styles */
  5069. [type="radio"]:not(:checked) + label:before,
  5070. [type="radio"]:not(:checked) + label:after,
  5071. [type="radio"]:checked + label:before,
  5072. [type="radio"]:checked + label:after,
  5073. [type="radio"].with-gap:checked + label:before,
  5074. [type="radio"].with-gap:checked + label:after {
  5075. border-radius: 50%;
  5076. }
  5077. [type="radio"]:not(:checked) + label:before,
  5078. [type="radio"]:not(:checked) + label:after {
  5079. border: 2px solid #5a5a5a;
  5080. }
  5081. [type="radio"]:not(:checked) + label:after {
  5082. z-index: -1;
  5083. -webkit-transform: scale(0);
  5084. transform: scale(0);
  5085. }
  5086. /* Checked styles */
  5087. [type="radio"]:checked + label:before {
  5088. border: 2px solid transparent;
  5089. }
  5090. [type="radio"]:checked + label:after,
  5091. [type="radio"].with-gap:checked + label:before,
  5092. [type="radio"].with-gap:checked + label:after {
  5093. border: 2px solid #26a69a;
  5094. }
  5095. [type="radio"]:checked + label:after,
  5096. [type="radio"].with-gap:checked + label:after {
  5097. background-color: #26a69a;
  5098. z-index: 0;
  5099. }
  5100. [type="radio"]:checked + label:after {
  5101. -webkit-transform: scale(1.02);
  5102. transform: scale(1.02);
  5103. }
  5104. /* Radio With gap */
  5105. [type="radio"].with-gap:checked + label:after {
  5106. -webkit-transform: scale(0.5);
  5107. transform: scale(0.5);
  5108. }
  5109. /* Focused styles */
  5110. [type="radio"].tabbed:focus + label:before {
  5111. box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
  5112. }
  5113. /* Disabled Radio With gap */
  5114. [type="radio"].with-gap:disabled:checked + label:before {
  5115. border: 2px solid rgba(0, 0, 0, 0.26);
  5116. }
  5117. [type="radio"].with-gap:disabled:checked + label:after {
  5118. border: none;
  5119. background-color: rgba(0, 0, 0, 0.26);
  5120. }
  5121. /* Disabled style */
  5122. [type="radio"]:disabled:not(:checked) + label:before,
  5123. [type="radio"]:disabled:checked + label:before {
  5124. background-color: transparent;
  5125. border-color: rgba(0, 0, 0, 0.26);
  5126. }
  5127. [type="radio"]:disabled + label {
  5128. color: rgba(0, 0, 0, 0.26);
  5129. }
  5130. [type="radio"]:disabled:not(:checked) + label:before {
  5131. border-color: rgba(0, 0, 0, 0.26);
  5132. }
  5133. [type="radio"]:disabled:checked + label:after {
  5134. background-color: rgba(0, 0, 0, 0.26);
  5135. border-color: #BDBDBD;
  5136. }
  5137. /* Checkboxes
  5138. ========================================================================== */
  5139. /* CUSTOM CSS CHECKBOXES */
  5140. form p {
  5141. margin-bottom: 10px;
  5142. text-align: left;
  5143. }
  5144. form p:last-child {
  5145. margin-bottom: 0;
  5146. }
  5147. /* Remove default checkbox */
  5148. [type="checkbox"]:not(:checked),
  5149. [type="checkbox"]:checked {
  5150. position: absolute;
  5151. left: -9999px;
  5152. opacity: 0;
  5153. }
  5154. [type="checkbox"] {
  5155. /* checkbox aspect */
  5156. }
  5157. [type="checkbox"] + label {
  5158. position: relative;
  5159. padding-left: 35px;
  5160. cursor: pointer;
  5161. display: inline-block;
  5162. height: 25px;
  5163. line-height: 25px;
  5164. font-size: 1rem;
  5165. -webkit-user-select: none;
  5166. /* webkit (safari, chrome) browsers */
  5167. -moz-user-select: none;
  5168. /* mozilla browsers */
  5169. -khtml-user-select: none;
  5170. /* webkit (konqueror) browsers */
  5171. -ms-user-select: none;
  5172. /* IE10+ */
  5173. }
  5174. [type="checkbox"] + label:before,
  5175. [type="checkbox"]:not(.filled-in) + label:after {
  5176. content: '';
  5177. position: absolute;
  5178. top: 0;
  5179. left: 0;
  5180. width: 18px;
  5181. height: 18px;
  5182. z-index: 0;
  5183. border: 2px solid #5a5a5a;
  5184. border-radius: 1px;
  5185. margin-top: 2px;
  5186. transition: .2s;
  5187. }
  5188. [type="checkbox"]:not(.filled-in) + label:after {
  5189. border: 0;
  5190. -webkit-transform: scale(0);
  5191. transform: scale(0);
  5192. }
  5193. [type="checkbox"]:not(:checked):disabled + label:before {
  5194. border: none;
  5195. background-color: rgba(0, 0, 0, 0.26);
  5196. }
  5197. [type="checkbox"].tabbed:focus + label:after {
  5198. -webkit-transform: scale(1);
  5199. transform: scale(1);
  5200. border: 0;
  5201. border-radius: 50%;
  5202. box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
  5203. background-color: rgba(0, 0, 0, 0.1);
  5204. }
  5205. [type="checkbox"]:checked + label:before {
  5206. top: -4px;
  5207. left: -5px;
  5208. width: 12px;
  5209. height: 22px;
  5210. border-top: 2px solid transparent;
  5211. border-left: 2px solid transparent;
  5212. border-right: 2px solid #26a69a;
  5213. border-bottom: 2px solid #26a69a;
  5214. -webkit-transform: rotate(40deg);
  5215. transform: rotate(40deg);
  5216. -webkit-backface-visibility: hidden;
  5217. backface-visibility: hidden;
  5218. -webkit-transform-origin: 100% 100%;
  5219. transform-origin: 100% 100%;
  5220. }
  5221. [type="checkbox"]:checked:disabled + label:before {
  5222. border-right: 2px solid rgba(0, 0, 0, 0.26);
  5223. border-bottom: 2px solid rgba(0, 0, 0, 0.26);
  5224. }
  5225. /* Indeterminate checkbox */
  5226. [type="checkbox"]:indeterminate + label:before {
  5227. top: -11px;
  5228. left: -12px;
  5229. width: 10px;
  5230. height: 22px;
  5231. border-top: none;
  5232. border-left: none;
  5233. border-right: 2px solid #26a69a;
  5234. border-bottom: none;
  5235. -webkit-transform: rotate(90deg);
  5236. transform: rotate(90deg);
  5237. -webkit-backface-visibility: hidden;
  5238. backface-visibility: hidden;
  5239. -webkit-transform-origin: 100% 100%;
  5240. transform-origin: 100% 100%;
  5241. }
  5242. [type="checkbox"]:indeterminate:disabled + label:before {
  5243. border-right: 2px solid rgba(0, 0, 0, 0.26);
  5244. background-color: transparent;
  5245. }
  5246. [type="checkbox"].filled-in + label:after {
  5247. border-radius: 2px;
  5248. }
  5249. [type="checkbox"].filled-in + label:before,
  5250. [type="checkbox"].filled-in + label:after {
  5251. content: '';
  5252. left: 0;
  5253. position: absolute;
  5254. /* .1s delay is for check animation */
  5255. transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
  5256. z-index: 1;
  5257. }
  5258. [type="checkbox"].filled-in:not(:checked) + label:before {
  5259. width: 0;
  5260. height: 0;
  5261. border: 3px solid transparent;
  5262. left: 6px;
  5263. top: 10px;
  5264. -webkit-transform: rotateZ(37deg);
  5265. transform: rotateZ(37deg);
  5266. -webkit-transform-origin: 20% 40%;
  5267. transform-origin: 100% 100%;
  5268. }
  5269. [type="checkbox"].filled-in:not(:checked) + label:after {
  5270. height: 20px;
  5271. width: 20px;
  5272. background-color: transparent;
  5273. border: 2px solid #5a5a5a;
  5274. top: 0px;
  5275. z-index: 0;
  5276. }
  5277. [type="checkbox"].filled-in:checked + label:before {
  5278. top: 0;
  5279. left: 1px;
  5280. width: 8px;
  5281. height: 13px;
  5282. border-top: 2px solid transparent;
  5283. border-left: 2px solid transparent;
  5284. border-right: 2px solid #fff;
  5285. border-bottom: 2px solid #fff;
  5286. -webkit-transform: rotateZ(37deg);
  5287. transform: rotateZ(37deg);
  5288. -webkit-transform-origin: 100% 100%;
  5289. transform-origin: 100% 100%;
  5290. }
  5291. [type="checkbox"].filled-in:checked + label:after {
  5292. top: 0;
  5293. width: 20px;
  5294. height: 20px;
  5295. border: 2px solid #26a69a;
  5296. background-color: #26a69a;
  5297. z-index: 0;
  5298. }
  5299. [type="checkbox"].filled-in.tabbed:focus + label:after {
  5300. border-radius: 2px;
  5301. border-color: #5a5a5a;
  5302. background-color: rgba(0, 0, 0, 0.1);
  5303. }
  5304. [type="checkbox"].filled-in.tabbed:checked:focus + label:after {
  5305. border-radius: 2px;
  5306. background-color: #26a69a;
  5307. border-color: #26a69a;
  5308. }
  5309. [type="checkbox"].filled-in:disabled:not(:checked) + label:before {
  5310. background-color: transparent;
  5311. border: 2px solid transparent;
  5312. }
  5313. [type="checkbox"].filled-in:disabled:not(:checked) + label:after {
  5314. border-color: transparent;
  5315. background-color: #BDBDBD;
  5316. }
  5317. [type="checkbox"].filled-in:disabled:checked + label:before {
  5318. background-color: transparent;
  5319. }
  5320. [type="checkbox"].filled-in:disabled:checked + label:after {
  5321. background-color: #BDBDBD;
  5322. border-color: #BDBDBD;
  5323. }
  5324. /* Switch
  5325. ========================================================================== */
  5326. .switch,
  5327. .switch * {
  5328. -webkit-user-select: none;
  5329. -moz-user-select: none;
  5330. -khtml-user-select: none;
  5331. -ms-user-select: none;
  5332. }
  5333. .switch label {
  5334. cursor: pointer;
  5335. }
  5336. .switch label input[type=checkbox] {
  5337. opacity: 0;
  5338. width: 0;
  5339. height: 0;
  5340. }
  5341. .switch label input[type=checkbox]:checked + .lever {
  5342. background-color: #84c7c1;
  5343. }
  5344. .switch label input[type=checkbox]:checked + .lever:after {
  5345. background-color: #26a69a;
  5346. left: 24px;
  5347. }
  5348. .switch label .lever {
  5349. content: "";
  5350. display: inline-block;
  5351. position: relative;
  5352. width: 40px;
  5353. height: 15px;
  5354. background-color: #818181;
  5355. border-radius: 15px;
  5356. margin-right: 10px;
  5357. transition: background 0.3s ease;
  5358. vertical-align: middle;
  5359. margin: 0 16px;
  5360. }
  5361. .switch label .lever:after {
  5362. content: "";
  5363. position: absolute;
  5364. display: inline-block;
  5365. width: 21px;
  5366. height: 21px;
  5367. background-color: #F1F1F1;
  5368. border-radius: 21px;
  5369. box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
  5370. left: -5px;
  5371. top: -3px;
  5372. transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;
  5373. }
  5374. input[type=checkbox]:checked:not(:disabled) ~ .lever:active::after,
  5375. input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::after {
  5376. box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 166, 154, 0.1);
  5377. }
  5378. input[type=checkbox]:not(:disabled) ~ .lever:active:after,
  5379. input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::after {
  5380. box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.08);
  5381. }
  5382. .switch input[type=checkbox][disabled] + .lever {
  5383. cursor: default;
  5384. }
  5385. .switch label input[type=checkbox][disabled] + .lever:after,
  5386. .switch label input[type=checkbox][disabled]:checked + .lever:after {
  5387. background-color: #BDBDBD;
  5388. }
  5389. /* Select Field
  5390. ========================================================================== */
  5391. select {
  5392. display: none;
  5393. }
  5394. select.browser-default {
  5395. display: block;
  5396. }
  5397. select {
  5398. background-color: rgba(255, 255, 255, 0.9);
  5399. width: 100%;
  5400. padding: 5px;
  5401. border: 1px solid #f2f2f2;
  5402. border-radius: 2px;
  5403. height: 3rem;
  5404. }
  5405. .select-label {
  5406. position: absolute;
  5407. }
  5408. .select-wrapper {
  5409. position: relative;
  5410. }
  5411. .select-wrapper input.select-dropdown {
  5412. position: relative;
  5413. cursor: pointer;
  5414. background-color: transparent;
  5415. border: none;
  5416. border-bottom: 1px solid #9e9e9e;
  5417. outline: none;
  5418. height: 3rem;
  5419. line-height: 3rem;
  5420. width: 100%;
  5421. font-size: 1rem;
  5422. margin: 0 0 20px 0;
  5423. padding: 0;
  5424. display: block;
  5425. }
  5426. .select-wrapper span.caret {
  5427. color: initial;
  5428. position: absolute;
  5429. right: 0;
  5430. top: 16px;
  5431. font-size: 10px;
  5432. }
  5433. .select-wrapper span.caret.disabled {
  5434. color: rgba(0, 0, 0, 0.26);
  5435. }
  5436. .select-wrapper + label {
  5437. position: absolute;
  5438. top: -14px;
  5439. font-size: 0.8rem;
  5440. }
  5441. select:disabled {
  5442. color: rgba(0, 0, 0, 0.3);
  5443. }
  5444. .select-wrapper input.select-dropdown:disabled {
  5445. color: rgba(0, 0, 0, 0.3);
  5446. cursor: default;
  5447. -webkit-user-select: none;
  5448. /* webkit (safari, chrome) browsers */
  5449. -moz-user-select: none;
  5450. /* mozilla browsers */
  5451. -ms-user-select: none;
  5452. /* IE10+ */
  5453. border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  5454. }
  5455. .select-wrapper i {
  5456. color: rgba(0, 0, 0, 0.3);
  5457. }
  5458. .select-dropdown li.disabled,
  5459. .select-dropdown li.disabled > span,
  5460. .select-dropdown li.optgroup {
  5461. color: rgba(0, 0, 0, 0.3);
  5462. background-color: transparent;
  5463. }
  5464. .prefix ~ .select-wrapper {
  5465. margin-left: 3rem;
  5466. width: 92%;
  5467. width: calc(100% - 3rem);
  5468. }
  5469. .prefix ~ label {
  5470. margin-left: 3rem;
  5471. }
  5472. .select-dropdown li img {
  5473. height: 40px;
  5474. width: 40px;
  5475. margin: 5px 15px;
  5476. float: right;
  5477. }
  5478. .select-dropdown li.optgroup {
  5479. border-top: 1px solid #eee;
  5480. }
  5481. .select-dropdown li.optgroup.selected > span {
  5482. color: rgba(0, 0, 0, 0.7);
  5483. }
  5484. .select-dropdown li.optgroup > span {
  5485. color: rgba(0, 0, 0, 0.4);
  5486. }
  5487. .select-dropdown li.optgroup ~ li.optgroup-option {
  5488. padding-left: 1rem;
  5489. }
  5490. /* File Input
  5491. ========================================================================== */
  5492. .file-field {
  5493. position: relative;
  5494. }
  5495. .file-field .file-path-wrapper {
  5496. overflow: hidden;
  5497. padding-left: 10px;
  5498. }
  5499. .file-field input.file-path {
  5500. width: 100%;
  5501. }
  5502. .file-field .btn, .file-field .btn-large {
  5503. float: left;
  5504. height: 3rem;
  5505. line-height: 3rem;
  5506. }
  5507. .file-field span {
  5508. cursor: pointer;
  5509. }
  5510. .file-field input[type=file] {
  5511. position: absolute;
  5512. top: 0;
  5513. right: 0;
  5514. left: 0;
  5515. bottom: 0;
  5516. width: 100%;
  5517. margin: 0;
  5518. padding: 0;
  5519. font-size: 20px;
  5520. cursor: pointer;
  5521. opacity: 0;
  5522. filter: alpha(opacity=0);
  5523. }
  5524. /* Range
  5525. ========================================================================== */
  5526. .range-field {
  5527. position: relative;
  5528. }
  5529. input[type=range],
  5530. input[type=range] + .thumb {
  5531. cursor: pointer;
  5532. }
  5533. input[type=range] {
  5534. position: relative;
  5535. background-color: transparent;
  5536. border: none;
  5537. outline: none;
  5538. width: 100%;
  5539. margin: 15px 0;
  5540. padding: 0;
  5541. }
  5542. input[type=range]:focus {
  5543. outline: none;
  5544. }
  5545. input[type=range] + .thumb {
  5546. position: absolute;
  5547. border: none;
  5548. height: 0;
  5549. width: 0;
  5550. border-radius: 50%;
  5551. background-color: #26a69a;
  5552. top: 10px;
  5553. margin-left: -6px;
  5554. -webkit-transform-origin: 50% 50%;
  5555. transform-origin: 50% 50%;
  5556. -webkit-transform: rotate(-45deg);
  5557. transform: rotate(-45deg);
  5558. }
  5559. input[type=range] + .thumb .value {
  5560. display: block;
  5561. width: 30px;
  5562. text-align: center;
  5563. color: #26a69a;
  5564. font-size: 0;
  5565. -webkit-transform: rotate(45deg);
  5566. transform: rotate(45deg);
  5567. }
  5568. input[type=range] + .thumb.active {
  5569. border-radius: 50% 50% 50% 0;
  5570. }
  5571. input[type=range] + .thumb.active .value {
  5572. color: #fff;
  5573. margin-left: -1px;
  5574. margin-top: 8px;
  5575. font-size: 10px;
  5576. }
  5577. input[type=range] {
  5578. -webkit-appearance: none;
  5579. }
  5580. input[type=range]::-webkit-slider-runnable-track {
  5581. height: 3px;
  5582. background: #c2c0c2;
  5583. border: none;
  5584. }
  5585. input[type=range]::-webkit-slider-thumb {
  5586. -webkit-appearance: none;
  5587. border: none;
  5588. height: 14px;
  5589. width: 14px;
  5590. border-radius: 50%;
  5591. background-color: #26a69a;
  5592. -webkit-transform-origin: 50% 50%;
  5593. transform-origin: 50% 50%;
  5594. margin: -5px 0 0 0;
  5595. transition: .3s;
  5596. }
  5597. input[type=range]:focus::-webkit-slider-runnable-track {
  5598. background: #ccc;
  5599. }
  5600. input[type=range] {
  5601. /* fix for FF unable to apply focus style bug */
  5602. border: 1px solid white;
  5603. /*required for proper track sizing in FF*/
  5604. }
  5605. input[type=range]::-moz-range-track {
  5606. height: 3px;
  5607. background: #ddd;
  5608. border: none;
  5609. }
  5610. input[type=range]::-moz-range-thumb {
  5611. border: none;
  5612. height: 14px;
  5613. width: 14px;
  5614. border-radius: 50%;
  5615. background: #26a69a;
  5616. margin-top: -5px;
  5617. }
  5618. input[type=range]:-moz-focusring {
  5619. outline: 1px solid #fff;
  5620. outline-offset: -1px;
  5621. }
  5622. input[type=range]:focus::-moz-range-track {
  5623. background: #ccc;
  5624. }
  5625. input[type=range]::-ms-track {
  5626. height: 3px;
  5627. background: transparent;
  5628. border-color: transparent;
  5629. border-width: 6px 0;
  5630. /*remove default tick marks*/
  5631. color: transparent;
  5632. }
  5633. input[type=range]::-ms-fill-lower {
  5634. background: #777;
  5635. }
  5636. input[type=range]::-ms-fill-upper {
  5637. background: #ddd;
  5638. }
  5639. input[type=range]::-ms-thumb {
  5640. border: none;
  5641. height: 14px;
  5642. width: 14px;
  5643. border-radius: 50%;
  5644. background: #26a69a;
  5645. }
  5646. input[type=range]:focus::-ms-fill-lower {
  5647. background: #888;
  5648. }
  5649. input[type=range]:focus::-ms-fill-upper {
  5650. background: #ccc;
  5651. }
  5652. /***************
  5653. Nav List
  5654. ***************/
  5655. .table-of-contents.fixed {
  5656. position: fixed;
  5657. }
  5658. .table-of-contents li {
  5659. padding: 2px 0;
  5660. }
  5661. .table-of-contents a {
  5662. display: inline-block;
  5663. font-weight: 300;
  5664. color: #757575;
  5665. padding-left: 20px;
  5666. height: 1.5rem;
  5667. line-height: 1.5rem;
  5668. letter-spacing: .4;
  5669. display: inline-block;
  5670. }
  5671. .table-of-contents a:hover {
  5672. color: #a8a8a8;
  5673. padding-left: 19px;
  5674. border-left: 1px solid #ea4a4f;
  5675. }
  5676. .table-of-contents a.active {
  5677. font-weight: 500;
  5678. padding-left: 18px;
  5679. border-left: 2px solid #ea4a4f;
  5680. }
  5681. .side-nav {
  5682. position: fixed;
  5683. width: 300px;
  5684. left: 0;
  5685. top: 0;
  5686. margin: 0;
  5687. -webkit-transform: translateX(-100%);
  5688. transform: translateX(-100%);
  5689. height: 100%;
  5690. height: calc(100% + 60px);
  5691. height: -moz-calc(100%);
  5692. padding-bottom: 60px;
  5693. background-color: #fff;
  5694. z-index: 999;
  5695. -webkit-backface-visibility: hidden;
  5696. backface-visibility: hidden;
  5697. overflow-y: auto;
  5698. will-change: transform;
  5699. -webkit-backface-visibility: hidden;
  5700. backface-visibility: hidden;
  5701. -webkit-transform: translateX(-105%);
  5702. transform: translateX(-105%);
  5703. }
  5704. .side-nav.right-aligned {
  5705. right: 0;
  5706. -webkit-transform: translateX(105%);
  5707. transform: translateX(105%);
  5708. left: auto;
  5709. -webkit-transform: translateX(100%);
  5710. transform: translateX(100%);
  5711. }
  5712. .side-nav .collapsible {
  5713. margin: 0;
  5714. }
  5715. .side-nav li {
  5716. float: none;
  5717. line-height: 48px;
  5718. }
  5719. .side-nav li.active {
  5720. background-color: rgba(0, 0, 0, 0.05);
  5721. }
  5722. .side-nav a {
  5723. color: rgba(0, 0, 0, 0.87);
  5724. display: block;
  5725. font-size: 14px;
  5726. font-weight: 500;
  5727. height: 48px;
  5728. line-height: 48px;
  5729. padding: 0 32px;
  5730. }
  5731. .side-nav a:hover {
  5732. background-color: rgba(0, 0, 0, 0.05);
  5733. }
  5734. .side-nav a.btn, .side-nav a.btn-large, .side-nav a.btn-large, .side-nav a.btn-flat, .side-nav a.btn-floating {
  5735. margin: 10px 15px;
  5736. }
  5737. .side-nav a.btn, .side-nav a.btn-large, .side-nav a.btn-large, .side-nav a.btn-floating {
  5738. color: #fff;
  5739. }
  5740. .side-nav a.btn-flat {
  5741. color: #343434;
  5742. }
  5743. .side-nav a.btn:hover, .side-nav a.btn-large:hover, .side-nav a.btn-large:hover {
  5744. background-color: #2bbbad;
  5745. }
  5746. .side-nav a.btn-floating:hover {
  5747. background-color: #26a69a;
  5748. }
  5749. .side-nav li > a > i,
  5750. .side-nav li > a > [class^="mdi-"], .side-nav li > a > [class*="mdi-"],
  5751. .side-nav li > a > i.material-icons {
  5752. float: left;
  5753. line-height: 48px;
  5754. margin: 0 32px 0 0;
  5755. width: 24px;
  5756. color: rgba(0, 0, 0, 0.54);
  5757. }
  5758. .side-nav .divider {
  5759. margin: 8px 0 0 0;
  5760. }
  5761. .side-nav .subheader {
  5762. cursor: initial;
  5763. pointer-events: none;
  5764. color: rgba(0, 0, 0, 0.54);
  5765. font-size: 14px;
  5766. font-weight: 500;
  5767. line-height: 48px;
  5768. }
  5769. .side-nav .subheader:hover {
  5770. background-color: transparent;
  5771. }
  5772. .side-nav .userView {
  5773. overflow: hidden;
  5774. position: relative;
  5775. padding: 32px 32px 0;
  5776. margin-bottom: 8px;
  5777. }
  5778. .side-nav .userView a {
  5779. height: auto;
  5780. padding: 0;
  5781. }
  5782. .side-nav .userView a:hover {
  5783. background-color: transparent;
  5784. }
  5785. .side-nav .userView .background {
  5786. position: absolute;
  5787. top: 0;
  5788. right: 0;
  5789. bottom: 0;
  5790. left: 0;
  5791. z-index: -1;
  5792. }
  5793. .side-nav .userView .circle, .side-nav .userView .name, .side-nav .userView .email {
  5794. display: block;
  5795. }
  5796. .side-nav .userView .circle {
  5797. height: 64px;
  5798. width: 64px;
  5799. }
  5800. .side-nav .userView .name,
  5801. .side-nav .userView .email {
  5802. font-weight: 14px;
  5803. line-height: 24px;
  5804. }
  5805. .side-nav .userView .name {
  5806. margin-top: 16px;
  5807. font-weight: 500;
  5808. }
  5809. .side-nav .userView .email {
  5810. padding-bottom: 16px;
  5811. font-weight: 400;
  5812. }
  5813. .drag-target {
  5814. height: 100%;
  5815. width: 10px;
  5816. position: fixed;
  5817. top: 0;
  5818. z-index: 998;
  5819. }
  5820. .side-nav.fixed a {
  5821. display: block;
  5822. padding: 0 16px;
  5823. color: rgba(0, 0, 0, 0.87);
  5824. }
  5825. .side-nav.fixed {
  5826. left: 0;
  5827. -webkit-transform: translateX(0);
  5828. transform: translateX(0);
  5829. position: fixed;
  5830. }
  5831. .side-nav.fixed.right-aligned {
  5832. right: 0;
  5833. left: auto;
  5834. }
  5835. @media only screen and (max-width: 992px) {
  5836. .side-nav.fixed {
  5837. -webkit-transform: translateX(-105%);
  5838. transform: translateX(-105%);
  5839. }
  5840. .side-nav.fixed.right-aligned {
  5841. -webkit-transform: translateX(105%);
  5842. transform: translateX(105%);
  5843. }
  5844. .side-nav a {
  5845. padding: 0 16px;
  5846. }
  5847. .side-nav .userView {
  5848. padding: 16px 16px 0;
  5849. }
  5850. }
  5851. .side-nav .collapsible-body li.active,
  5852. .side-nav.fixed .collapsible-body li.active {
  5853. background-color: #ee6e73;
  5854. }
  5855. .side-nav .collapsible-body li.active a,
  5856. .side-nav.fixed .collapsible-body li.active a {
  5857. color: #fff;
  5858. }
  5859. #sidenav-overlay {
  5860. position: fixed;
  5861. top: 0;
  5862. left: 0;
  5863. right: 0;
  5864. height: 120vh;
  5865. background-color: rgba(0, 0, 0, 0.5);
  5866. z-index: 997;
  5867. will-change: opacity;
  5868. }
  5869. /*
  5870. @license
  5871. Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
  5872. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5873. The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  5874. The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  5875. Code distributed by Google as part of the polymer project is also
  5876. subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  5877. */
  5878. /**************************/
  5879. /* STYLES FOR THE SPINNER */
  5880. /**************************/
  5881. /*
  5882. * Constants:
  5883. * STROKEWIDTH = 3px
  5884. * ARCSIZE = 270 degrees (amount of circle the arc takes up)
  5885. * ARCTIME = 1333ms (time it takes to expand and contract arc)
  5886. * ARCSTARTROT = 216 degrees (how much the start location of the arc
  5887. * should rotate each time, 216 gives us a
  5888. * 5 pointed star shape (it's 360/5 * 3).
  5889. * For a 7 pointed star, we might do
  5890. * 360/7 * 3 = 154.286)
  5891. * CONTAINERWIDTH = 28px
  5892. * SHRINK_TIME = 400ms
  5893. */
  5894. .preloader-wrapper {
  5895. display: inline-block;
  5896. position: relative;
  5897. width: 48px;
  5898. height: 48px;
  5899. }
  5900. .preloader-wrapper.small {
  5901. width: 36px;
  5902. height: 36px;
  5903. }
  5904. .preloader-wrapper.big {
  5905. width: 64px;
  5906. height: 64px;
  5907. }
  5908. .preloader-wrapper.active {
  5909. /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
  5910. -webkit-animation: container-rotate 1568ms linear infinite;
  5911. animation: container-rotate 1568ms linear infinite;
  5912. }
  5913. @-webkit-keyframes container-rotate {
  5914. to {
  5915. -webkit-transform: rotate(360deg);
  5916. }
  5917. }
  5918. @keyframes container-rotate {
  5919. to {
  5920. -webkit-transform: rotate(360deg);
  5921. transform: rotate(360deg);
  5922. }
  5923. }
  5924. .spinner-layer {
  5925. position: absolute;
  5926. width: 100%;
  5927. height: 100%;
  5928. opacity: 0;
  5929. border-color: #26a69a;
  5930. }
  5931. .spinner-blue,
  5932. .spinner-blue-only {
  5933. border-color: #4285f4;
  5934. }
  5935. .spinner-red,
  5936. .spinner-red-only {
  5937. border-color: #db4437;
  5938. }
  5939. .spinner-yellow,
  5940. .spinner-yellow-only {
  5941. border-color: #f4b400;
  5942. }
  5943. .spinner-green,
  5944. .spinner-green-only {
  5945. border-color: #0f9d58;
  5946. }
  5947. /**
  5948. * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
  5949. *
  5950. * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
  5951. * guarantee that the animation will start _exactly_ after that value. So we avoid using
  5952. * animation-delay and instead set custom keyframes for each color (as redundant as it
  5953. * seems).
  5954. *
  5955. * We write out each animation in full (instead of separating animation-name,
  5956. * animation-duration, etc.) because under the polyfill, Safari does not recognize those
  5957. * specific properties properly, treats them as -webkit-animation, and overrides the
  5958. * other animation rules. See https://github.com/Polymer/platform/issues/53.
  5959. */
  5960. .active .spinner-layer.spinner-blue {
  5961. /* durations: 4 * ARCTIME */
  5962. -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  5963. animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  5964. }
  5965. .active .spinner-layer.spinner-red {
  5966. /* durations: 4 * ARCTIME */
  5967. -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  5968. animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  5969. }
  5970. .active .spinner-layer.spinner-yellow {
  5971. /* durations: 4 * ARCTIME */
  5972. -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  5973. animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  5974. }
  5975. .active .spinner-layer.spinner-green {
  5976. /* durations: 4 * ARCTIME */
  5977. -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  5978. animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  5979. }
  5980. .active .spinner-layer,
  5981. .active .spinner-layer.spinner-blue-only,
  5982. .active .spinner-layer.spinner-red-only,
  5983. .active .spinner-layer.spinner-yellow-only,
  5984. .active .spinner-layer.spinner-green-only {
  5985. /* durations: 4 * ARCTIME */
  5986. opacity: 1;
  5987. -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  5988. animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  5989. }
  5990. @-webkit-keyframes fill-unfill-rotate {
  5991. 12.5% {
  5992. -webkit-transform: rotate(135deg);
  5993. }
  5994. /* 0.5 * ARCSIZE */
  5995. 25% {
  5996. -webkit-transform: rotate(270deg);
  5997. }
  5998. /* 1 * ARCSIZE */
  5999. 37.5% {
  6000. -webkit-transform: rotate(405deg);
  6001. }
  6002. /* 1.5 * ARCSIZE */
  6003. 50% {
  6004. -webkit-transform: rotate(540deg);
  6005. }
  6006. /* 2 * ARCSIZE */
  6007. 62.5% {
  6008. -webkit-transform: rotate(675deg);
  6009. }
  6010. /* 2.5 * ARCSIZE */
  6011. 75% {
  6012. -webkit-transform: rotate(810deg);
  6013. }
  6014. /* 3 * ARCSIZE */
  6015. 87.5% {
  6016. -webkit-transform: rotate(945deg);
  6017. }
  6018. /* 3.5 * ARCSIZE */
  6019. to {
  6020. -webkit-transform: rotate(1080deg);
  6021. }
  6022. /* 4 * ARCSIZE */
  6023. }
  6024. @keyframes fill-unfill-rotate {
  6025. 12.5% {
  6026. -webkit-transform: rotate(135deg);
  6027. transform: rotate(135deg);
  6028. }
  6029. /* 0.5 * ARCSIZE */
  6030. 25% {
  6031. -webkit-transform: rotate(270deg);
  6032. transform: rotate(270deg);
  6033. }
  6034. /* 1 * ARCSIZE */
  6035. 37.5% {
  6036. -webkit-transform: rotate(405deg);
  6037. transform: rotate(405deg);
  6038. }
  6039. /* 1.5 * ARCSIZE */
  6040. 50% {
  6041. -webkit-transform: rotate(540deg);
  6042. transform: rotate(540deg);
  6043. }
  6044. /* 2 * ARCSIZE */
  6045. 62.5% {
  6046. -webkit-transform: rotate(675deg);
  6047. transform: rotate(675deg);
  6048. }
  6049. /* 2.5 * ARCSIZE */
  6050. 75% {
  6051. -webkit-transform: rotate(810deg);
  6052. transform: rotate(810deg);
  6053. }
  6054. /* 3 * ARCSIZE */
  6055. 87.5% {
  6056. -webkit-transform: rotate(945deg);
  6057. transform: rotate(945deg);
  6058. }
  6059. /* 3.5 * ARCSIZE */
  6060. to {
  6061. -webkit-transform: rotate(1080deg);
  6062. transform: rotate(1080deg);
  6063. }
  6064. /* 4 * ARCSIZE */
  6065. }
  6066. @-webkit-keyframes blue-fade-in-out {
  6067. from {
  6068. opacity: 1;
  6069. }
  6070. 25% {
  6071. opacity: 1;
  6072. }
  6073. 26% {
  6074. opacity: 0;
  6075. }
  6076. 89% {
  6077. opacity: 0;
  6078. }
  6079. 90% {
  6080. opacity: 1;
  6081. }
  6082. 100% {
  6083. opacity: 1;
  6084. }
  6085. }
  6086. @keyframes blue-fade-in-out {
  6087. from {
  6088. opacity: 1;
  6089. }
  6090. 25% {
  6091. opacity: 1;
  6092. }
  6093. 26% {
  6094. opacity: 0;
  6095. }
  6096. 89% {
  6097. opacity: 0;
  6098. }
  6099. 90% {
  6100. opacity: 1;
  6101. }
  6102. 100% {
  6103. opacity: 1;
  6104. }
  6105. }
  6106. @-webkit-keyframes red-fade-in-out {
  6107. from {
  6108. opacity: 0;
  6109. }
  6110. 15% {
  6111. opacity: 0;
  6112. }
  6113. 25% {
  6114. opacity: 1;
  6115. }
  6116. 50% {
  6117. opacity: 1;
  6118. }
  6119. 51% {
  6120. opacity: 0;
  6121. }
  6122. }
  6123. @keyframes red-fade-in-out {
  6124. from {
  6125. opacity: 0;
  6126. }
  6127. 15% {
  6128. opacity: 0;
  6129. }
  6130. 25% {
  6131. opacity: 1;
  6132. }
  6133. 50% {
  6134. opacity: 1;
  6135. }
  6136. 51% {
  6137. opacity: 0;
  6138. }
  6139. }
  6140. @-webkit-keyframes yellow-fade-in-out {
  6141. from {
  6142. opacity: 0;
  6143. }
  6144. 40% {
  6145. opacity: 0;
  6146. }
  6147. 50% {
  6148. opacity: 1;
  6149. }
  6150. 75% {
  6151. opacity: 1;
  6152. }
  6153. 76% {
  6154. opacity: 0;
  6155. }
  6156. }
  6157. @keyframes yellow-fade-in-out {
  6158. from {
  6159. opacity: 0;
  6160. }
  6161. 40% {
  6162. opacity: 0;
  6163. }
  6164. 50% {
  6165. opacity: 1;
  6166. }
  6167. 75% {
  6168. opacity: 1;
  6169. }
  6170. 76% {
  6171. opacity: 0;
  6172. }
  6173. }
  6174. @-webkit-keyframes green-fade-in-out {
  6175. from {
  6176. opacity: 0;
  6177. }
  6178. 65% {
  6179. opacity: 0;
  6180. }
  6181. 75% {
  6182. opacity: 1;
  6183. }
  6184. 90% {
  6185. opacity: 1;
  6186. }
  6187. 100% {
  6188. opacity: 0;
  6189. }
  6190. }
  6191. @keyframes green-fade-in-out {
  6192. from {
  6193. opacity: 0;
  6194. }
  6195. 65% {
  6196. opacity: 0;
  6197. }
  6198. 75% {
  6199. opacity: 1;
  6200. }
  6201. 90% {
  6202. opacity: 1;
  6203. }
  6204. 100% {
  6205. opacity: 0;
  6206. }
  6207. }
  6208. /**
  6209. * Patch the gap that appear between the two adjacent div.circle-clipper while the
  6210. * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
  6211. */
  6212. .gap-patch {
  6213. position: absolute;
  6214. top: 0;
  6215. left: 45%;
  6216. width: 10%;
  6217. height: 100%;
  6218. overflow: hidden;
  6219. border-color: inherit;
  6220. }
  6221. .gap-patch .circle {
  6222. width: 1000%;
  6223. left: -450%;
  6224. }
  6225. .circle-clipper {
  6226. display: inline-block;
  6227. position: relative;
  6228. width: 50%;
  6229. height: 100%;
  6230. overflow: hidden;
  6231. border-color: inherit;
  6232. }
  6233. .circle-clipper .circle {
  6234. width: 200%;
  6235. height: 100%;
  6236. border-width: 3px;
  6237. /* STROKEWIDTH */
  6238. border-style: solid;
  6239. border-color: inherit;
  6240. border-bottom-color: transparent !important;
  6241. border-radius: 50%;
  6242. -webkit-animation: none;
  6243. animation: none;
  6244. position: absolute;
  6245. top: 0;
  6246. right: 0;
  6247. bottom: 0;
  6248. }
  6249. .circle-clipper.left .circle {
  6250. left: 0;
  6251. border-right-color: transparent !important;
  6252. -webkit-transform: rotate(129deg);
  6253. transform: rotate(129deg);
  6254. }
  6255. .circle-clipper.right .circle {
  6256. left: -100%;
  6257. border-left-color: transparent !important;
  6258. -webkit-transform: rotate(-129deg);
  6259. transform: rotate(-129deg);
  6260. }
  6261. .active .circle-clipper.left .circle {
  6262. /* duration: ARCTIME */
  6263. -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  6264. animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  6265. }
  6266. .active .circle-clipper.right .circle {
  6267. /* duration: ARCTIME */
  6268. -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  6269. animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  6270. }
  6271. @-webkit-keyframes left-spin {
  6272. from {
  6273. -webkit-transform: rotate(130deg);
  6274. }
  6275. 50% {
  6276. -webkit-transform: rotate(-5deg);
  6277. }
  6278. to {
  6279. -webkit-transform: rotate(130deg);
  6280. }
  6281. }
  6282. @keyframes left-spin {
  6283. from {
  6284. -webkit-transform: rotate(130deg);
  6285. transform: rotate(130deg);
  6286. }
  6287. 50% {
  6288. -webkit-transform: rotate(-5deg);
  6289. transform: rotate(-5deg);
  6290. }
  6291. to {
  6292. -webkit-transform: rotate(130deg);
  6293. transform: rotate(130deg);
  6294. }
  6295. }
  6296. @-webkit-keyframes right-spin {
  6297. from {
  6298. -webkit-transform: rotate(-130deg);
  6299. }
  6300. 50% {
  6301. -webkit-transform: rotate(5deg);
  6302. }
  6303. to {
  6304. -webkit-transform: rotate(-130deg);
  6305. }
  6306. }
  6307. @keyframes right-spin {
  6308. from {
  6309. -webkit-transform: rotate(-130deg);
  6310. transform: rotate(-130deg);
  6311. }
  6312. 50% {
  6313. -webkit-transform: rotate(5deg);
  6314. transform: rotate(5deg);
  6315. }
  6316. to {
  6317. -webkit-transform: rotate(-130deg);
  6318. transform: rotate(-130deg);
  6319. }
  6320. }
  6321. #spinnerContainer.cooldown {
  6322. /* duration: SHRINK_TIME */
  6323. -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
  6324. animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
  6325. }
  6326. @-webkit-keyframes fade-out {
  6327. from {
  6328. opacity: 1;
  6329. }
  6330. to {
  6331. opacity: 0;
  6332. }
  6333. }
  6334. @keyframes fade-out {
  6335. from {
  6336. opacity: 1;
  6337. }
  6338. to {
  6339. opacity: 0;
  6340. }
  6341. }
  6342. .slider {
  6343. position: relative;
  6344. height: 400px;
  6345. width: 100%;
  6346. }
  6347. .slider.fullscreen {
  6348. height: 100%;
  6349. width: 100%;
  6350. position: absolute;
  6351. top: 0;
  6352. left: 0;
  6353. right: 0;
  6354. bottom: 0;
  6355. }
  6356. .slider.fullscreen ul.slides {
  6357. height: 100%;
  6358. }
  6359. .slider.fullscreen ul.indicators {
  6360. z-index: 2;
  6361. bottom: 30px;
  6362. }
  6363. .slider .slides {
  6364. background-color: #9e9e9e;
  6365. margin: 0;
  6366. height: 400px;
  6367. }
  6368. .slider .slides li {
  6369. opacity: 0;
  6370. position: absolute;
  6371. top: 0;
  6372. left: 0;
  6373. z-index: 1;
  6374. width: 100%;
  6375. height: inherit;
  6376. overflow: hidden;
  6377. }
  6378. .slider .slides li img {
  6379. height: 100%;
  6380. width: 100%;
  6381. background-size: cover;
  6382. background-position: center;
  6383. }
  6384. .slider .slides li .caption {
  6385. color: #fff;
  6386. position: absolute;
  6387. top: 15%;
  6388. left: 15%;
  6389. width: 70%;
  6390. opacity: 0;
  6391. }
  6392. .slider .slides li .caption p {
  6393. color: #e0e0e0;
  6394. }
  6395. .slider .slides li.active {
  6396. z-index: 2;
  6397. }
  6398. .slider .indicators {
  6399. position: absolute;
  6400. text-align: center;
  6401. left: 0;
  6402. right: 0;
  6403. bottom: 0;
  6404. margin: 0;
  6405. }
  6406. .slider .indicators .indicator-item {
  6407. display: inline-block;
  6408. position: relative;
  6409. cursor: pointer;
  6410. height: 16px;
  6411. width: 16px;
  6412. margin: 0 12px;
  6413. background-color: #e0e0e0;
  6414. transition: background-color .3s;
  6415. border-radius: 50%;
  6416. }
  6417. .slider .indicators .indicator-item.active {
  6418. background-color: #4CAF50;
  6419. }
  6420. .carousel {
  6421. overflow: hidden;
  6422. position: relative;
  6423. width: 100%;
  6424. height: 400px;
  6425. -webkit-perspective: 500px;
  6426. perspective: 500px;
  6427. -webkit-transform-style: preserve-3d;
  6428. transform-style: preserve-3d;
  6429. -webkit-transform-origin: 0% 50%;
  6430. transform-origin: 0% 50%;
  6431. }
  6432. .carousel.carousel-slider {
  6433. top: 0;
  6434. left: 0;
  6435. height: 0;
  6436. }
  6437. .carousel.carousel-slider .carousel-fixed-item {
  6438. position: absolute;
  6439. left: 0;
  6440. right: 0;
  6441. bottom: 20px;
  6442. z-index: 1;
  6443. }
  6444. .carousel.carousel-slider .carousel-fixed-item.with-indicators {
  6445. bottom: 68px;
  6446. }
  6447. .carousel.carousel-slider .carousel-item {
  6448. width: 100%;
  6449. height: 100%;
  6450. min-height: 400px;
  6451. position: absolute;
  6452. top: 0;
  6453. left: 0;
  6454. }
  6455. .carousel.carousel-slider .carousel-item h2 {
  6456. font-size: 24px;
  6457. font-weight: 500;
  6458. line-height: 32px;
  6459. }
  6460. .carousel.carousel-slider .carousel-item p {
  6461. font-size: 15px;
  6462. }
  6463. .carousel .carousel-item {
  6464. display: none;
  6465. width: 200px;
  6466. height: 400px;
  6467. position: absolute;
  6468. top: 0;
  6469. left: 0;
  6470. }
  6471. .carousel .carousel-item img {
  6472. width: 100%;
  6473. }
  6474. .carousel .indicators {
  6475. position: absolute;
  6476. text-align: center;
  6477. left: 0;
  6478. right: 0;
  6479. bottom: 0;
  6480. margin: 0;
  6481. }
  6482. .carousel .indicators .indicator-item {
  6483. display: inline-block;
  6484. position: relative;
  6485. cursor: pointer;
  6486. height: 8px;
  6487. width: 8px;
  6488. margin: 24px 4px;
  6489. background-color: rgba(255, 255, 255, 0.5);
  6490. transition: background-color .3s;
  6491. border-radius: 50%;
  6492. }
  6493. .carousel .indicators .indicator-item.active {
  6494. background-color: #fff;
  6495. }
  6496. /* ==========================================================================
  6497. $BASE-PICKER
  6498. ========================================================================== */
  6499. /**
  6500. * Note: the root picker element should *NOT* be styled more than what's here.
  6501. */
  6502. .picker {
  6503. font-size: 16px;
  6504. text-align: left;
  6505. line-height: 1.2;
  6506. color: #000000;
  6507. position: absolute;
  6508. z-index: 10000;
  6509. -webkit-user-select: none;
  6510. -moz-user-select: none;
  6511. -ms-user-select: none;
  6512. user-select: none;
  6513. }
  6514. /**
  6515. * The picker input element.
  6516. */
  6517. .picker__input {
  6518. cursor: default;
  6519. }
  6520. /**
  6521. * When the picker is opened, the input element is "activated".
  6522. */
  6523. .picker__input.picker__input--active {
  6524. border-color: #0089ec;
  6525. }
  6526. /**
  6527. * The holder is the only "scrollable" top-level container element.
  6528. */
  6529. .picker__holder {
  6530. width: 100%;
  6531. overflow-y: auto;
  6532. -webkit-overflow-scrolling: touch;
  6533. }
  6534. /*!
  6535. * Default mobile-first, responsive styling for pickadate.js
  6536. * Demo: http://amsul.github.io/pickadate.js
  6537. */
  6538. /**
  6539. * Note: the root picker element should *NOT* be styled more than what's here.
  6540. */
  6541. /**
  6542. * Make the holder and frame fullscreen.
  6543. */
  6544. .picker__holder,
  6545. .picker__frame {
  6546. bottom: 0;
  6547. left: 0;
  6548. right: 0;
  6549. top: 100%;
  6550. }
  6551. /**
  6552. * The holder should overlay the entire screen.
  6553. */
  6554. .picker__holder {
  6555. position: fixed;
  6556. transition: background 0.15s ease-out, top 0s 0.15s;
  6557. -webkit-backface-visibility: hidden;
  6558. }
  6559. /**
  6560. * The frame that bounds the box contents of the picker.
  6561. */
  6562. .picker__frame {
  6563. position: absolute;
  6564. margin: 0 auto;
  6565. min-width: 256px;
  6566. width: 300px;
  6567. max-height: 350px;
  6568. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  6569. filter: alpha(opacity=0);
  6570. -moz-opacity: 0;
  6571. opacity: 0;
  6572. transition: all 0.15s ease-out;
  6573. }
  6574. @media (min-height: 28.875em) {
  6575. .picker__frame {
  6576. overflow: visible;
  6577. top: auto;
  6578. bottom: -100%;
  6579. max-height: 80%;
  6580. }
  6581. }
  6582. @media (min-height: 40.125em) {
  6583. .picker__frame {
  6584. margin-bottom: 7.5%;
  6585. }
  6586. }
  6587. /**
  6588. * The wrapper sets the stage to vertically align the box contents.
  6589. */
  6590. .picker__wrap {
  6591. display: table;
  6592. width: 100%;
  6593. height: 100%;
  6594. }
  6595. @media (min-height: 28.875em) {
  6596. .picker__wrap {
  6597. display: block;
  6598. }
  6599. }
  6600. /**
  6601. * The box contains all the picker contents.
  6602. */
  6603. .picker__box {
  6604. background: #ffffff;
  6605. display: table-cell;
  6606. vertical-align: middle;
  6607. }
  6608. @media (min-height: 28.875em) {
  6609. .picker__box {
  6610. display: block;
  6611. border: 1px solid #777777;
  6612. border-top-color: #898989;
  6613. border-bottom-width: 0;
  6614. border-radius: 5px 5px 0 0;
  6615. box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
  6616. }
  6617. }
  6618. /**
  6619. * When the picker opens...
  6620. */
  6621. .picker--opened .picker__holder {
  6622. top: 0;
  6623. background: transparent;
  6624. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
  6625. zoom: 1;
  6626. background: rgba(0, 0, 0, 0.32);
  6627. transition: background 0.15s ease-out;
  6628. }
  6629. .picker--opened .picker__frame {
  6630. top: 0;
  6631. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  6632. filter: alpha(opacity=100);
  6633. -moz-opacity: 1;
  6634. opacity: 1;
  6635. }
  6636. @media (min-height: 35.875em) {
  6637. .picker--opened .picker__frame {
  6638. top: 10%;
  6639. bottom: auto;
  6640. }
  6641. }
  6642. /**
  6643. * For `large` screens, transform into an inline picker.
  6644. */
  6645. /* ==========================================================================
  6646. CUSTOM MATERIALIZE STYLES
  6647. ========================================================================== */
  6648. .picker__input.picker__input--active {
  6649. border-color: #E3F2FD;
  6650. }
  6651. .picker__frame {
  6652. margin: 0 auto;
  6653. max-width: 325px;
  6654. }
  6655. @media (min-height: 38.875em) {
  6656. .picker--opened .picker__frame {
  6657. top: 10%;
  6658. bottom: auto;
  6659. }
  6660. }
  6661. /* ==========================================================================
  6662. $BASE-DATE-PICKER
  6663. ========================================================================== */
  6664. /**
  6665. * The picker box.
  6666. */
  6667. .picker__box {
  6668. padding: 0 1em;
  6669. }
  6670. /**
  6671. * The header containing the month and year stuff.
  6672. */
  6673. .picker__header {
  6674. text-align: center;
  6675. position: relative;
  6676. margin-top: .75em;
  6677. }
  6678. /**
  6679. * The month and year labels.
  6680. */
  6681. .picker__month,
  6682. .picker__year {
  6683. display: inline-block;
  6684. margin-left: .25em;
  6685. margin-right: .25em;
  6686. }
  6687. /**
  6688. * The month and year selectors.
  6689. */
  6690. .picker__select--month,
  6691. .picker__select--year {
  6692. height: 2em;
  6693. padding: 0;
  6694. margin-left: .25em;
  6695. margin-right: .25em;
  6696. }
  6697. .picker__select--month.browser-default {
  6698. display: inline;
  6699. background-color: #FFFFFF;
  6700. width: 40%;
  6701. }
  6702. .picker__select--year.browser-default {
  6703. display: inline;
  6704. background-color: #FFFFFF;
  6705. width: 26%;
  6706. }
  6707. .picker__select--month:focus,
  6708. .picker__select--year:focus {
  6709. border-color: rgba(0, 0, 0, 0.05);
  6710. }
  6711. /**
  6712. * The month navigation buttons.
  6713. */
  6714. .picker__nav--prev,
  6715. .picker__nav--next {
  6716. position: absolute;
  6717. padding: .5em 1.25em;
  6718. width: 1em;
  6719. height: 1em;
  6720. box-sizing: content-box;
  6721. top: -0.25em;
  6722. }
  6723. .picker__nav--prev {
  6724. left: -1em;
  6725. padding-right: 1.25em;
  6726. }
  6727. .picker__nav--next {
  6728. right: -1em;
  6729. padding-left: 1.25em;
  6730. }
  6731. .picker__nav--disabled,
  6732. .picker__nav--disabled:hover,
  6733. .picker__nav--disabled:before,
  6734. .picker__nav--disabled:before:hover {
  6735. cursor: default;
  6736. background: none;
  6737. border-right-color: #f5f5f5;
  6738. border-left-color: #f5f5f5;
  6739. }
  6740. /**
  6741. * The calendar table of dates
  6742. */
  6743. .picker__table {
  6744. text-align: center;
  6745. border-collapse: collapse;
  6746. border-spacing: 0;
  6747. table-layout: fixed;
  6748. font-size: 1rem;
  6749. width: 100%;
  6750. margin-top: .75em;
  6751. margin-bottom: .5em;
  6752. }
  6753. .picker__table th, .picker__table td {
  6754. text-align: center;
  6755. }
  6756. .picker__table td {
  6757. margin: 0;
  6758. padding: 0;
  6759. }
  6760. /**
  6761. * The weekday labels
  6762. */
  6763. .picker__weekday {
  6764. width: 14.285714286%;
  6765. font-size: .75em;
  6766. padding-bottom: .25em;
  6767. color: #999999;
  6768. font-weight: 500;
  6769. /* Increase the spacing a tad */
  6770. }
  6771. @media (min-height: 33.875em) {
  6772. .picker__weekday {
  6773. padding-bottom: .5em;
  6774. }
  6775. }
  6776. /**
  6777. * The days on the calendar
  6778. */
  6779. .picker__day--today {
  6780. position: relative;
  6781. color: #595959;
  6782. letter-spacing: -.3;
  6783. padding: .75rem 0;
  6784. font-weight: 400;
  6785. border: 1px solid transparent;
  6786. }
  6787. .picker__day--disabled:before {
  6788. border-top-color: #aaaaaa;
  6789. }
  6790. .picker__day--infocus:hover {
  6791. cursor: pointer;
  6792. color: #000;
  6793. font-weight: 500;
  6794. }
  6795. .picker__day--outfocus {
  6796. display: none;
  6797. padding: .75rem 0;
  6798. color: #fff;
  6799. }
  6800. .picker__day--outfocus:hover {
  6801. cursor: pointer;
  6802. color: #dddddd;
  6803. font-weight: 500;
  6804. }
  6805. .picker__day--highlighted:hover,
  6806. .picker--focused .picker__day--highlighted {
  6807. cursor: pointer;
  6808. }
  6809. .picker__day--selected,
  6810. .picker__day--selected:hover,
  6811. .picker--focused .picker__day--selected {
  6812. border-radius: 50%;
  6813. -webkit-transform: scale(0.75);
  6814. transform: scale(0.75);
  6815. background: #0089ec;
  6816. color: #ffffff;
  6817. }
  6818. .picker__day--disabled,
  6819. .picker__day--disabled:hover,
  6820. .picker--focused .picker__day--disabled {
  6821. background: #f5f5f5;
  6822. border-color: #f5f5f5;
  6823. color: #dddddd;
  6824. cursor: default;
  6825. }
  6826. .picker__day--highlighted.picker__day--disabled,
  6827. .picker__day--highlighted.picker__day--disabled:hover {
  6828. background: #bbbbbb;
  6829. }
  6830. /**
  6831. * The footer containing the "today", "clear", and "close" buttons.
  6832. */
  6833. .picker__footer {
  6834. text-align: center;
  6835. display: -webkit-flex;
  6836. display: -ms-flexbox;
  6837. display: flex;
  6838. -webkit-align-items: center;
  6839. -ms-flex-align: center;
  6840. align-items: center;
  6841. -webkit-justify-content: space-between;
  6842. -ms-flex-pack: justify;
  6843. justify-content: space-between;
  6844. }
  6845. .picker__button--today,
  6846. .picker__button--clear,
  6847. .picker__button--close {
  6848. border: 1px solid #ffffff;
  6849. background: #ffffff;
  6850. font-size: .8em;
  6851. padding: .66em 0;
  6852. font-weight: bold;
  6853. width: 33%;
  6854. display: inline-block;
  6855. vertical-align: bottom;
  6856. }
  6857. .picker__button--today:hover,
  6858. .picker__button--clear:hover,
  6859. .picker__button--close:hover {
  6860. cursor: pointer;
  6861. color: #000000;
  6862. background: #b1dcfb;
  6863. border-bottom-color: #b1dcfb;
  6864. }
  6865. .picker__button--today:focus,
  6866. .picker__button--clear:focus,
  6867. .picker__button--close:focus {
  6868. background: #b1dcfb;
  6869. border-color: rgba(0, 0, 0, 0.05);
  6870. outline: none;
  6871. }
  6872. .picker__button--today:before,
  6873. .picker__button--clear:before,
  6874. .picker__button--close:before {
  6875. position: relative;
  6876. display: inline-block;
  6877. height: 0;
  6878. }
  6879. .picker__button--today:before,
  6880. .picker__button--clear:before {
  6881. content: " ";
  6882. margin-right: .45em;
  6883. }
  6884. .picker__button--today:before {
  6885. top: -0.05em;
  6886. width: 0;
  6887. border-top: 0.66em solid #0059bc;
  6888. border-left: .66em solid transparent;
  6889. }
  6890. .picker__button--clear:before {
  6891. top: -0.25em;
  6892. width: .66em;
  6893. border-top: 3px solid #ee2200;
  6894. }
  6895. .picker__button--close:before {
  6896. content: "\D7";
  6897. top: -0.1em;
  6898. vertical-align: top;
  6899. font-size: 1.1em;
  6900. margin-right: .35em;
  6901. color: #777777;
  6902. }
  6903. .picker__button--today[disabled],
  6904. .picker__button--today[disabled]:hover {
  6905. background: #f5f5f5;
  6906. border-color: #f5f5f5;
  6907. color: #dddddd;
  6908. cursor: default;
  6909. }
  6910. .picker__button--today[disabled]:before {
  6911. border-top-color: #aaaaaa;
  6912. }
  6913. /* ==========================================================================
  6914. CUSTOM MATERIALIZE STYLES
  6915. ========================================================================== */
  6916. .picker__box {
  6917. border-radius: 2px;
  6918. overflow: hidden;
  6919. }
  6920. .picker__date-display {
  6921. text-align: center;
  6922. background-color: #26a69a;
  6923. color: #fff;
  6924. padding-bottom: 15px;
  6925. font-weight: 300;
  6926. }
  6927. .picker__nav--prev:hover,
  6928. .picker__nav--next:hover {
  6929. cursor: pointer;
  6930. color: #000000;
  6931. background: #a1ded8;
  6932. }
  6933. .picker__weekday-display {
  6934. background-color: #1f897f;
  6935. padding: 10px;
  6936. font-weight: 200;
  6937. letter-spacing: .5;
  6938. font-size: 1rem;
  6939. margin-bottom: 15px;
  6940. }
  6941. .picker__month-display {
  6942. text-transform: uppercase;
  6943. font-size: 2rem;
  6944. }
  6945. .picker__day-display {
  6946. font-size: 4.5rem;
  6947. font-weight: 400;
  6948. }
  6949. .picker__year-display {
  6950. font-size: 1.8rem;
  6951. color: rgba(255, 255, 255, 0.4);
  6952. }
  6953. .picker__box {
  6954. padding: 0;
  6955. }
  6956. .picker__calendar-container {
  6957. padding: 0 1rem;
  6958. }
  6959. .picker__calendar-container thead {
  6960. border: none;
  6961. }
  6962. .picker__table {
  6963. margin-top: 0;
  6964. margin-bottom: .5em;
  6965. }
  6966. .picker__day--infocus {
  6967. color: #595959;
  6968. letter-spacing: -.3;
  6969. padding: .75rem 0;
  6970. font-weight: 400;
  6971. border: 1px solid transparent;
  6972. }
  6973. .picker__day.picker__day--today {
  6974. color: #26a69a;
  6975. }
  6976. .picker__day.picker__day--today.picker__day--selected {
  6977. color: #fff;
  6978. }
  6979. .picker__weekday {
  6980. font-size: .9rem;
  6981. }
  6982. .picker__day--selected,
  6983. .picker__day--selected:hover,
  6984. .picker--focused .picker__day--selected {
  6985. border-radius: 50%;
  6986. -webkit-transform: scale(0.9);
  6987. transform: scale(0.9);
  6988. background-color: #26a69a;
  6989. color: #ffffff;
  6990. }
  6991. .picker__day--selected.picker__day--outfocus,
  6992. .picker__day--selected:hover.picker__day--outfocus,
  6993. .picker--focused .picker__day--selected.picker__day--outfocus {
  6994. background-color: #a1ded8;
  6995. }
  6996. .picker__footer {
  6997. text-align: right;
  6998. padding: 5px 10px;
  6999. }
  7000. .picker__close, .picker__today {
  7001. font-size: 1.1rem;
  7002. padding: 0 1rem;
  7003. color: #26a69a;
  7004. }
  7005. .picker__nav--prev:before,
  7006. .picker__nav--next:before {
  7007. content: " ";
  7008. border-top: .5em solid transparent;
  7009. border-bottom: .5em solid transparent;
  7010. border-right: 0.75em solid #676767;
  7011. width: 0;
  7012. height: 0;
  7013. display: block;
  7014. margin: 0 auto;
  7015. }
  7016. .picker__nav--next:before {
  7017. border-right: 0;
  7018. border-left: 0.75em solid #676767;
  7019. }
  7020. button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus {
  7021. background-color: #a1ded8;
  7022. }
  7023. /* ==========================================================================
  7024. $BASE-TIME-PICKER
  7025. ========================================================================== */
  7026. /**
  7027. * The list of times.
  7028. */
  7029. .picker__list {
  7030. list-style: none;
  7031. padding: 0.75em 0 4.2em;
  7032. margin: 0;
  7033. }
  7034. /**
  7035. * The times on the clock.
  7036. */
  7037. .picker__list-item {
  7038. border-bottom: 1px solid #dddddd;
  7039. border-top: 1px solid #dddddd;
  7040. margin-bottom: -1px;
  7041. position: relative;
  7042. background: #ffffff;
  7043. padding: .75em 1.25em;
  7044. }
  7045. @media (min-height: 46.75em) {
  7046. .picker__list-item {
  7047. padding: .5em 1em;
  7048. }
  7049. }
  7050. /* Hovered time */
  7051. .picker__list-item:hover {
  7052. cursor: pointer;
  7053. color: #000000;
  7054. background: #b1dcfb;
  7055. border-color: #0089ec;
  7056. z-index: 10;
  7057. }
  7058. /* Highlighted and hovered/focused time */
  7059. .picker__list-item--highlighted {
  7060. border-color: #0089ec;
  7061. z-index: 10;
  7062. }
  7063. .picker__list-item--highlighted:hover,
  7064. .picker--focused .picker__list-item--highlighted {
  7065. cursor: pointer;
  7066. color: #000000;
  7067. background: #b1dcfb;
  7068. }
  7069. /* Selected and hovered/focused time */
  7070. .picker__list-item--selected,
  7071. .picker__list-item--selected:hover,
  7072. .picker--focused .picker__list-item--selected {
  7073. background: #0089ec;
  7074. color: #ffffff;
  7075. z-index: 10;
  7076. }
  7077. /* Disabled time */
  7078. .picker__list-item--disabled,
  7079. .picker__list-item--disabled:hover,
  7080. .picker--focused .picker__list-item--disabled {
  7081. background: #f5f5f5;
  7082. border-color: #f5f5f5;
  7083. color: #dddddd;
  7084. cursor: default;
  7085. border-color: #dddddd;
  7086. z-index: auto;
  7087. }
  7088. /**
  7089. * The clear button
  7090. */
  7091. .picker--time .picker__button--clear {
  7092. display: block;
  7093. width: 80%;
  7094. margin: 1em auto 0;
  7095. padding: 1em 1.25em;
  7096. background: none;
  7097. border: 0;
  7098. font-weight: 500;
  7099. font-size: .67em;
  7100. text-align: center;
  7101. text-transform: uppercase;
  7102. color: #666;
  7103. }
  7104. .picker--time .picker__button--clear:hover,
  7105. .picker--time .picker__button--clear:focus {
  7106. color: #000000;
  7107. background: #b1dcfb;
  7108. background: #ee2200;
  7109. border-color: #ee2200;
  7110. cursor: pointer;
  7111. color: #ffffff;
  7112. outline: none;
  7113. }
  7114. .picker--time .picker__button--clear:before {
  7115. top: -0.25em;
  7116. color: #666;
  7117. font-size: 1.25em;
  7118. font-weight: bold;
  7119. }
  7120. .picker--time .picker__button--clear:hover:before,
  7121. .picker--time .picker__button--clear:focus:before {
  7122. color: #ffffff;
  7123. }
  7124. /* ==========================================================================
  7125. $DEFAULT-TIME-PICKER
  7126. ========================================================================== */
  7127. /**
  7128. * The frame the bounds the time picker.
  7129. */
  7130. .picker--time .picker__frame {
  7131. min-width: 256px;
  7132. max-width: 320px;
  7133. }
  7134. /**
  7135. * The picker box.
  7136. */
  7137. .picker--time .picker__box {
  7138. font-size: 1em;
  7139. background: #f2f2f2;
  7140. padding: 0;
  7141. }
  7142. @media (min-height: 40.125em) {
  7143. .picker--time .picker__box {
  7144. margin-bottom: 5em;
  7145. }
  7146. }