fl-color-picker.css 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662
  1. /* Iris Base
  2. ---------------------------------------------------- */
  3. .fl-color-picker-ui {
  4. width: 300px;
  5. }
  6. .fl-color-picker-ui.fl-color-alpha-enabled {
  7. width: 238px;
  8. }
  9. .fl-color-picker-ui .iris-picker {
  10. float: left;
  11. width: 100%;
  12. height: 224px;
  13. display: block;
  14. position: relative;
  15. border-top: 1px solid rgba(0,0,0,0.1);
  16. }
  17. .fl-color-picker-ui .iris-picker, .iris-picker * {
  18. -moz-box-sizing: content-box;
  19. -webkit-box-sizing: content-box;
  20. box-sizing: content-box;
  21. }
  22. .fl-color-picker-ui .iris-error {
  23. background-color: #ffafaf;
  24. }
  25. .fl-color-picker-ui .iris-picker-inner{
  26. position: absolute;
  27. top: 0;
  28. right: 0;
  29. left: 0;
  30. bottom: 0;
  31. }
  32. .fl-color-picker-ui .iris-picker .iris-square-inner {
  33. position: absolute;
  34. left: 0;
  35. right: 0;
  36. top: 0;
  37. bottom: 0;
  38. }
  39. .fl-color-picker-ui .iris-picker .iris-square {
  40. width: 300px;
  41. height: 200px;
  42. }
  43. .fl-color-picker-ui .iris-picker .iris-slider,
  44. .fl-color-picker-ui .iris-picker .iris-square-inner,
  45. .fl-color-picker-ui .iris-picker .iris-palette {
  46. height: 100%;
  47. width: 12.5%;
  48. }
  49. .fl-color-picker-ui .iris-picker .iris-placeholder,
  50. .fl-color-picker-ui .iris-picker .iris-square {
  51. position: relative;
  52. }
  53. .fl-color-picker-ui .iris-picker .iris-square-inner {
  54. width: auto;
  55. margin: 0;
  56. }
  57. .fl-color-picker-ui .iris-ie-9 .iris-square,
  58. .fl-color-picker-ui .iris-ie-9 .iris-slider,
  59. .fl-color-picker-ui .iris-ie-9 .iris-square-inner,
  60. .fl-color-picker-ui .iris-ie-9 .iris-palette {
  61. box-shadow: none;
  62. border-radius: 0;
  63. }
  64. .fl-color-picker-ui .iris-ie-9 .iris-square,
  65. .fl-color-picker-ui .iris-ie-9 .iris-slider,
  66. .fl-color-picker-ui .iris-ie-9 .iris-palette {
  67. outline: 1px solid rgba(0,0,0,.1);
  68. }
  69. .fl-color-picker-ui .iris-ie-lt9 .iris-square,
  70. .fl-color-picker-ui .iris-ie-lt9 .iris-slider,
  71. .fl-color-picker-ui .iris-ie-lt9 .iris-square-inner,
  72. .fl-color-picker-ui .iris-ie-lt9 .iris-palette {
  73. outline: 1px solid #999;
  74. }
  75. .fl-color-picker-ui .iris-ie-lt9 .iris-square .ui-slider-handle {
  76. outline: 1px solid #999;
  77. background-color: #fff;
  78. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  79. }
  80. .fl-color-picker-ui .iris-ie-lt9 .iris-square .iris-square-handle {
  81. background: none;
  82. border: 3px solid #fff;
  83. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  84. }
  85. .fl-color-picker-ui .iris-picker .iris-strip {
  86. box-sizing: border-box;
  87. width: calc(300px - 12px);
  88. margin: 6px 6px;
  89. margin-top: 5px;
  90. border-radius: 4px;
  91. position: relative;
  92. height: 22px;
  93. -webkit-transform: rotate(180deg);
  94. -ms-transform: rotate(180deg);
  95. -o-transform: rotate(180deg);
  96. transform: rotate(180deg);
  97. }
  98. .fl-color-picker-ui .iris-picker .iris-strip .ui-slider-handle {
  99. width: 6px;
  100. position: absolute;
  101. right: 0;
  102. top: -2px;
  103. bottom: -2px;
  104. margin: 0;
  105. border-radius: 3px;
  106. background: #fff;
  107. box-shadow: 0 0px 2px rgba(0,0,0,.5);
  108. z-index: 5;
  109. cursor: ew-resize;
  110. }
  111. .fl-color-picker-ui .iris-picker .iris-strip .ui-slider-handle:focus {
  112. outline: 2px solid #00a0d2;
  113. }
  114. .fl-color-picker-ui .iris-picker .iris-slider-offset {
  115. position: absolute;
  116. top: 0;
  117. left: 6px;
  118. right: 0;
  119. bottom: 0;
  120. width: auto;
  121. height: auto;
  122. background: transparent;
  123. border: none;
  124. border-radius: 0;
  125. -webkit-transform: rotate(180deg);
  126. -ms-transform: rotate(180deg);
  127. -o-transform: rotate(180deg);
  128. transform: rotate(180deg);
  129. }
  130. .fl-color-picker-ui .iris-picker .iris-square-handle {
  131. background: transparent;
  132. border: 5px solid #999;
  133. border-radius: 50%;
  134. border-color: rgba(128,128,128,.5);
  135. box-shadow:none;
  136. width: 12px;
  137. height: 12px;
  138. position: absolute;
  139. left: -10px;
  140. top: -10px;
  141. cursor: move;
  142. opacity: 1;
  143. z-index: 10;
  144. }
  145. .fl-color-picker-ui .iris-picker .ui-state-focus .iris-square-handle {
  146. opacity: .8;
  147. }
  148. .fl-color-picker-ui .iris-picker .iris-square-handle:hover {
  149. border-color: #999;
  150. }
  151. .fl-color-picker-ui .iris-picker .iris-square-value:focus .iris-square-handle {
  152. box-shadow: 0 0 2px rgba(0,0,0,.75);
  153. opacity: .8;
  154. }
  155. .fl-color-picker-ui .iris-picker .iris-square-handle:hover::after {
  156. border-color: #fff;
  157. }
  158. .fl-color-picker-ui .iris-picker .iris-square-handle::after {
  159. position: absolute;
  160. bottom: -4px;
  161. right: -4px;
  162. left: -4px;
  163. top: -4px;
  164. border: 3px solid #f9f9f9;
  165. border-color: rgba(255,255,255,.8);
  166. border-radius: 50%;
  167. content: " ";
  168. }
  169. .fl-color-picker-ui .iris-picker .iris-square-value {
  170. width: 8px;
  171. height: 8px;
  172. position: absolute;
  173. }
  174. .iris-ie-lt9 .iris-square-value, .iris-mozilla .iris-square-value {
  175. width: 1px;
  176. height: 1px;
  177. }
  178. /* Beaver Picker
  179. ---------------------------------------------------- */
  180. .fl-color-picker-wrapper {
  181. position: relative;
  182. width: 48px;
  183. height: 32px;
  184. }
  185. .fl-color-picker {
  186. box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);
  187. background:white;
  188. border-radius: 4px;
  189. width: 120px;
  190. height:36px;
  191. display: flex;
  192. flex-direction: row;
  193. }
  194. .fl-color-picker-color {
  195. flex: 1 1 100%;
  196. box-sizing: border-box !important;
  197. position: relative;
  198. border-radius: 4px;
  199. background-color: transparent;
  200. cursor: pointer;
  201. border: 2px solid transparent;
  202. border-right: 2px solid rgba(0,0,0,0.1);
  203. padding:0;
  204. justify-content: center;
  205. display: flex;
  206. }
  207. .fl-color-picker-color:hover,
  208. .fl-color-picker-clear:hover {
  209. background:transparent;
  210. border: 2px solid transparent;
  211. }
  212. .fl-color-picker-color:focus,
  213. .fl-color-picker-color.fl-color-picker-empty:focus,
  214. .fl-color-picker-clear:focus {
  215. outline:none;
  216. top:0;
  217. border: 2px solid #00a0d2;
  218. background: transparent;
  219. }
  220. .fl-color-picker.fl-color-picker-has-reset .fl-color-picker-color:not(.fl-color-picker-empty) {
  221. border-top-right-radius: 0px;
  222. border-bottom-right-radius: 0px;
  223. }
  224. .fl-color-picker-icon {
  225. display:none;
  226. margin:auto;
  227. }
  228. .fl-color-picker-color.fl-color-picker-empty {
  229. border-color: transparent;
  230. }
  231. .fl-color-picker-color.fl-color-picker-empty svg.fl-color-picker-icon {
  232. display:block;
  233. }
  234. .fl-color-picker-color.fl-color-picker-empty svg.fl-color-picker-icon path {
  235. fill:inherit;
  236. }
  237. .fl-color-picker-clear {
  238. box-sizing: border-box;
  239. position: relative;
  240. display: flex;
  241. flex: 0 0 36px;
  242. justify-content: center;
  243. padding: 0;
  244. border: 2px solid transparent;
  245. border-top-right-radius: 4px;
  246. border-bottom-right-radius: 4px;
  247. background-color: #ffffff;
  248. border-color:transparent;
  249. cursor: pointer;
  250. }
  251. .fl-color-picker-color.fl-color-picker-empty + .fl-color-picker-clear {
  252. display: none;
  253. }
  254. .fl-color-picker-ui {
  255. display: inline-block;
  256. font-family: Helvetica, Verdana, sans-serif;
  257. z-index: 999999;
  258. position: fixed;
  259. overflow: hidden;
  260. padding-bottom: 45px;
  261. border: 1px solid rgba(0,0,0,0.1);
  262. color: #999;
  263. background-color: #FAFAFA;
  264. border-radius: 3px;
  265. -webkit-box-shadow: 0 9px 20px rgba(0, 0, 0, 0.17);
  266. box-shadow: 0 9px 20px rgba(0, 0, 0, 0.17);
  267. -webkit-transition: opacity .2s, visibility .2s;
  268. -moz-transition: opacity .2s, visibility .2s;
  269. -ms-transition: opacity .2s, visibility .2s;
  270. -o-transition: opacity .2s, visibility .2s;
  271. transition: opacity .2s, visibility .2s;
  272. visibility: hidden;
  273. opacity: 0;
  274. -webkit-transform: translate3d(0,0,0);
  275. }
  276. .fl-color-picker-ui.fl-color-picker-active{
  277. visibility: visible;
  278. opacity: 1;
  279. }
  280. .fl-color-picker-ui .fl-color-picker-input,
  281. .fl-color-picker-ui .fl-color-picker-input:focus{
  282. width: 100%;
  283. height: 30px;
  284. border: none !important;
  285. font-size: 14px !important;
  286. padding: 0 8px;
  287. vertical-align: middle;
  288. color: #656c6e;
  289. background-color: #fff;
  290. border-radius: 0;
  291. -webkit-box-shadow: none;
  292. box-shadow: none;
  293. }
  294. .fl-color-picker-ui .iris-square-value {
  295. -webkit-transition: none;
  296. -moz-transition: none;
  297. -ms-transition: none;
  298. -o-transition: none;
  299. transition: none;
  300. }
  301. .fl-color-picker-preset-add{
  302. position: absolute;
  303. top: 8px;
  304. right: 8px;
  305. width: 14px;
  306. height: 14px;
  307. background-color: #656c6e;
  308. border-radius: 50%;
  309. cursor: pointer;
  310. -webkit-transition: all .2s;
  311. -moz-transition: all .2s;
  312. -ms-transition: all .2s;
  313. -o-transition: all .2s;
  314. transition: all .2s;
  315. }
  316. .fl-color-picker-preset-add:hover{
  317. background-color: #333;
  318. }
  319. .fl-color-picker-preset-add:before,
  320. .fl-color-picker-preset-add:after{
  321. content: '';
  322. display: block;
  323. position: relative;
  324. background-color: #fff;
  325. }
  326. .fl-color-picker-preset-add:before{
  327. top: 6px;
  328. left: 3px;
  329. width: 8px;
  330. height: 2px;
  331. }
  332. .fl-color-picker-preset-add:after{
  333. left: 6px;
  334. top: 1px;
  335. width: 2px;
  336. height: 8px;
  337. }
  338. .fl-color-picker-presets{
  339. position: absolute;
  340. left: 0;
  341. bottom: 0;
  342. width: 100%;
  343. z-index: 15;
  344. overflow: auto;
  345. border-top: 1px solid rgba(0,0,0,0.1);
  346. background-color: #FAFAFA;
  347. }
  348. .fl-color-picker-presets-toggle{
  349. position: relative;
  350. overflow: hidden;
  351. width: 100%;
  352. height: 35px;
  353. text-align: center;
  354. line-height: 35px;
  355. font-size: 12px;
  356. font-weight: bold;
  357. cursor: pointer;
  358. -webkit-transition: all .1s;
  359. -moz-transition: all .1s;
  360. -ms-transition: all .1s;
  361. -o-transition: all .1s;
  362. transition: all .1s;
  363. }
  364. .fl-color-picker-presets-toggle:hover{
  365. background-color: #EDEDED;
  366. }
  367. .fl-color-picker-presets-open-label,
  368. .fl-color-picker-presets-close-label{
  369. position: absolute;
  370. top: 50%;
  371. left: 50%;
  372. visibility: hidden;
  373. color: #999;
  374. -webkit-transition: all .5s;
  375. -moz-transition: all .5s;
  376. -ms-transition: all .5s;
  377. -o-transition: all .5s;
  378. transition: all .5s;
  379. -webkit-transform: translate(-50%,-50%);
  380. -ms-transform: translate(-50%,-50%);
  381. -o-transform: translate(-50%,-50%);
  382. transform: translate(-50%,-50%);
  383. opacity: 0;
  384. width: 100%;
  385. }
  386. .fl-color-picker-presets-open-label.fl-color-picker-active,
  387. .fl-color-picker-presets-close-label.fl-color-picker-active{
  388. color: #656c6e;
  389. visibility: visible;
  390. opacity: 1;
  391. }
  392. .fl-color-picker-presets-list{
  393. width: 100%;
  394. list-style: none;
  395. margin: 0;
  396. padding: 0;
  397. overflow: auto;
  398. }
  399. .fl-color-picker-presets-list .fl-color-picker-preset,
  400. .fl-color-picker-presets-list .fl-color-picker-no-preset{
  401. position: relative;
  402. padding: 5px;
  403. font-size: 12px;
  404. border-top: 1px solid rgba(0,0,0,0.1);
  405. -webkit-transition: all .1s;
  406. -moz-transition: all .1s;
  407. -ms-transition: all .1s;
  408. -o-transition: all .1s;
  409. transition: all .1s;
  410. }
  411. .fl-color-picker-presets-list .fl-color-picker-no-preset{
  412. padding: 18px 5px;
  413. text-align:center;
  414. }
  415. .fl-color-picker-presets-list .fl-color-picker-preset:hover{
  416. background-color: #EDEDED;
  417. }
  418. .fl-color-picker-presets-list .fl-color-picker-preset-color{
  419. display: inline-block;
  420. width: 40px;
  421. height: 20px;
  422. margin-right: 3px;
  423. vertical-align: middle;
  424. border: 1px solid rgba(0,0,0,0.1);
  425. border-radius: 2px;
  426. cursor: pointer;
  427. }
  428. .fl-color-picker-presets-list .fl-color-picker-preset-label {
  429. vertical-align: middle;
  430. color: #333;
  431. cursor: pointer;
  432. }
  433. .fl-color-picker-presets-list .fl-color-picker-preset-remove {
  434. position: absolute;
  435. top: 50%;
  436. cursor: pointer;
  437. -webkit-transform: translateY(-50%);
  438. -ms-transform: translateY(-50%);
  439. -o-transform: translateY(-50%);
  440. transform: translateY(-50%);
  441. }
  442. .fl-color-picker-clear .fl-color-picker-icon-remove {
  443. right: auto;
  444. top: auto;
  445. margin:auto;
  446. }
  447. .fl-color-picker-presets-list .fl-color-picker-preset-remove {
  448. right: 5px;
  449. }
  450. .fl-color-picker-presets-list .fl-color-picker-preset-remove:hover:before,
  451. .fl-color-picker-presets-list .fl-color-picker-preset-remove:hover:after {
  452. background-color: #333;
  453. }
  454. .fl-color-picker-added{
  455. position: absolute;
  456. width: 100%;
  457. top: 0;
  458. left: 0;
  459. right: 0;
  460. bottom: 35px;
  461. z-index: 10;
  462. color: #fff;
  463. text-align: center;
  464. background-color: rgba(0,0,0,.8);
  465. }
  466. .fl-color-picker-added-text{
  467. position: absolute;
  468. top: 50%;
  469. left: 50%;
  470. width: 80%;
  471. font-size: 14px;
  472. color: #fff !important;
  473. -webkit-transform: translate(-50%,-50%);
  474. -ms-transform: translate(-50%,-50%);
  475. -o-transform: translate(-50%,-50%);
  476. transform: translate(-50%,-50%);
  477. }
  478. /* Color Picker Icons
  479. ---------------------------------------------------- */
  480. .fl-color-picker-icon-check{
  481. position: relative;
  482. width: 50px;
  483. height: 50px;
  484. margin: 5px auto;
  485. }
  486. .fl-color-picker-icon-check:before{
  487. content: '';
  488. display: block;
  489. position: relative;
  490. width: 15px;
  491. height: 30px;
  492. margin-left: 14px;
  493. border: 7px solid #fff;
  494. border-left: none;
  495. border-top: none;
  496. -webkit-transform: rotate(45deg);
  497. -moz-transform: rotate(45deg);
  498. -ms-transform: rotate(45deg);
  499. -o-transform: rotate(45deg);
  500. transform: rotate(45deg);
  501. }
  502. .fl-color-picker-icon-arrow-up,
  503. .fl-color-picker-icon-arrow-down{
  504. display: inline-block;
  505. position: relative;
  506. width: 10px;
  507. height: 10px;
  508. margin-left: 5px;
  509. }
  510. .fl-color-picker-icon-arrow-up:before,
  511. .fl-color-picker-icon-arrow-down:before{
  512. content: '';
  513. display: block;
  514. position: relative;
  515. width: 6px;
  516. height: 6px;
  517. border: 2px solid #999;
  518. border-left: none;
  519. border-top: none;
  520. -webkit-transform: rotate(45deg);
  521. -moz-transform: rotate(45deg);
  522. -ms-transform: rotate(45deg);
  523. -o-transform: rotate(45deg);
  524. transform: rotate(45deg);
  525. }
  526. .fl-color-picker-icon-arrow-up{
  527. top: 2px;
  528. -webkit-transform: rotate(180deg);
  529. -moz-transform: rotate(180deg);
  530. -ms-transform: rotate(180deg);
  531. -o-transform: rotate(180deg);
  532. transform: rotate(180deg);
  533. }
  534. .fl-color-picker-icon-remove{
  535. width: 15px;
  536. height: 15px;
  537. }
  538. .fl-color-picker-icon-remove:before,
  539. .fl-color-picker-icon-remove:after{
  540. content: '';
  541. display: block;
  542. position: relative;
  543. background-color: #6f7881;
  544. }
  545. .fl-color-picker-icon-remove:before{
  546. left: 6px;
  547. width: 2px;
  548. height: 10px;
  549. margin-top: 3px;
  550. -webkit-transform: rotate(-45deg);
  551. -moz-transform: rotate(-45deg);
  552. -ms-transform: rotate(-45deg);
  553. -o-transform: rotate(-45deg);
  554. transform: rotate(-45deg);
  555. }
  556. .fl-color-picker-icon-remove:after{
  557. left: 6px;
  558. width: 2px;
  559. height: 10px;
  560. margin-top: -10px;
  561. -webkit-transform: rotate(45deg);
  562. -moz-transform: rotate(45deg);
  563. -ms-transform: rotate(45deg);
  564. -o-transform: rotate(45deg);
  565. transform: rotate(45deg);
  566. }
  567. /* Color Picker Alpha / Opacity
  568. ---------------------------------------------------- */
  569. .fl-alpha-wrap {
  570. position: absolute;
  571. width: 35px;
  572. height: 215px;
  573. padding: 0 5px;
  574. right: 4px;
  575. border-top: none;
  576. }
  577. .fl-alpha-slider {
  578. height: 190px;
  579. position: absolute;
  580. top: 12px;
  581. width: 28px;
  582. }
  583. .fl-alpha-slider .ui-slider-handle {
  584. background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  585. border-color: #aaa;
  586. border-radius: 4px;
  587. border-style: solid;
  588. border-width: 4px;
  589. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  590. -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  591. -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  592. cursor: ns-resize;
  593. height: 12px;
  594. left: 0;
  595. opacity: 0.9;
  596. position: absolute;
  597. right: 0;
  598. width: 30px;
  599. z-index: 14;
  600. }
  601. .fl-alpha-slider .ui-slider-handle:before {
  602. content: " ";
  603. position: absolute;
  604. left: -2px;
  605. right: -2px;
  606. top: -3px;
  607. bottom: -3px;
  608. border: 2px solid #fff;
  609. border-radius: 3px;
  610. }
  611. .fl-alpha-slider-offset {
  612. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAASCAYAAAAe/ZHXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkNEQUQ0ODM4RUE0MTFFNEExOEJFN0E5M0VFOTg0QUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkNEQUQ0ODQ4RUE0MTFFNEExOEJFN0E5M0VFOTg0QUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2Q0RBRDQ4MThFQTQxMUU0QTE4QkU3QTkzRUU5ODRBRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2Q0RBRDQ4MjhFQTQxMUU0QTE4QkU3QTkzRUU5ODRBRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/r/N8AAAWYSURBVHjarFvvR3VBEN45JZGIPkREHyIiIhJJf3qUSERE9CGiDxERkcg9z9u92uucvTszz5z7xnHPj93Z2d359cxscn5+jpTS+EoiMr3/+51cZ2dn4+e29i2/u7y8RKf/pO3vc+o+n5ycoNK31+f6+jrfZ37yuG2mf3R01H3fa5N/b29vU6dP5qft0G4PDg5MGuPr/v4+jz1t27mfvN/b21P75+fHx8eZfiV/Ozs7rUJnSu/5+RlFv+m6ZJpbW1s1PnrvXl9fZ/qX89zY2LB4mfy+v7/nsdV1XltbK/dr5vnz87OcV5bJabuVlRVLBifjfX9/l/xkGtM+S0tLNXnu0szfU/P3IMn/k0678h6ddqjQFGccVL6hoCsVfsq+NZ5QtCv5rfFS41sq37W+UPhMyhxEWTetvce3NR8oewqD39qalXuGAK/WPltjajIC4x2c9Ye1f43SGcqGwRBeTZjhMNntL4pCWZMQYhE05RVl02EovRgC4RkCbUNSQAGhGB/GsKG4h6FQoigDa2i8fRBy3uLMXYIG3Vr3aZvRaCRdBYlYIMZywhBGCVhgzzOlgRuUSOvC0GMEWxOM/+EtQFh1OIIXtfwg1tRaayGjg5px0jyZKEaTle3e+AsLCygVRAh3FlEgKbReE3oYGj9EgIR00QiEgKw3ZBQbRGjBeAMtDETQmHiKDsezJNLgCTFGItZXlAgCSiQggblP+9c8SDI0lXWlFv5g3K63KZ51FOcZzthQ3LomoNHwJmKIQISI3vqzSpwIQ8liSjGMFQjDpoVgaQ6cWgvLhOC7qiAwiHrWbEg4JMSmeUrBuHoYwioOQNXmhmAcrs096s1gJCGi3hSEVU8DQxYElYHhKwUUGAa+NqOBMsSSAQJuhQhCAH4vxozExsxiihPuaIrjCVYKWlYEsjSM52G8Kxxryngl5j0j+EyGTIiED4s1Itm0ZGWxMFCLJaBAcEI6OBkmFgNBoc8Cait2ZnENE/6wQN8LJSJeSMNAjKVm+LUMAIt3PR5AQgIGp1Z5zxhE8PtXUYReYeXi4mKmOPNXBMzt2tPT07LIUtJqr66uusXEbkFnWiQ6Pj72ikrtzc1NKopuvbbj58PDwxqNHp27u7tuYWumUDV+v7+/Xyu6pc59+/DwUCsC9ujt7u6qRbt8//T01C3elbyN70fb29uZ/1FSincvLy/lPGb42tzc9IqJeHt7q61Pr2C6vr7u7tfHx8fMPhV0sLq6WhZtU0n36+uru8elPE7aLi8v1wqJPXn++fmZKYgX8ozFxcXJb0NaQTHClZT8+gBjsYdaFc+zWcUkGTCWENY66ta92oSVzo3WI6IZKGtukeyfBLFKBNAj6bUOBgaoe9wE4n04IBNkLMoC7+Skj630ZlTJMYdyMsU2T8AwpzALkVFilZgJcT2l9PCWDDSAMBSjVlJgZNk0lE1AIby0qCiCnBQNj6aBGQslZIZJ5hB6D/AzQHto5Z9Nk8tARdN4q2ExBnsyIJ311EymShyjan2rKk0zh1Ay1oQVWAZQRnkUA8RFw7TahjBnmNgMVMQrsCGZJezRtGlU0cUZ1zuaxGZPpbhApM+ZpFQqQ6xadoMtBrEKpBVo4GRXvNSxpaRixKiR+TChCYhsDwZkfFj8IkErjAHejcUI0XQrgwehhNSMHAz21E0wZ23FcCAmj8Sd/PXy2xLYLAuwRw4IMsqjFaWYOpMEhDySAPFCWyFkgAHrEcA+BNeJ4UE8HCzJPpCrerUmQIx1pWJkjqxJD8EikUo2c5aI8ZYgsAkM4WQtnHd0ns0ORgVTBghy5ISy928SGsbTMqYg523RUY8oNYG4FIYiyRyZCnFCJC87IoRAIMVOqQ7BKexxCS2hYVl9JhvlpYjnAe4MhmRPMWhhvLfXINaI9WKM0Zu0+SfAAFLE1EgfVSv7AAAAAElFTkSuQmCC);
  613. background-position: center;
  614. box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) inset;
  615. -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) inset;
  616. -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) inset;
  617. width: 200px;
  618. height: 22px;
  619. -webkit-transform: rotate(-90deg);
  620. -moz-transform: rotate(-90deg);
  621. -ms-transform: rotate(-90deg);
  622. -o-transform: rotate(-90deg);
  623. transform: rotate(-90deg);
  624. bottom: 48%;
  625. left: -80px;
  626. position: absolute;
  627. }
  628. .fl-alpha-text {
  629. width: 30px;
  630. font-size: 12px;
  631. text-align: center;
  632. color: #999;
  633. position: absolute;
  634. bottom: -5px;
  635. }